欢迎光临
我的个人博客网站

异步(二)回调地狱

一.回调地狱

在谈到回调地狱发生的情况和解决办法,需要先了解ajax请求

先列出服务器提供的数据接口: app.get('/data1', (req, res) => {   res.send('hi') }) app.get('/data2', (req, res) => {   res.send('hello') }) app.get('/data3', (req, res) => {   res.send('nihao') })   // 启动监听 app.listen(3000, () => {   console.log('running...') }) 

 

原生ajax请求步骤

let xhr = new XMLHttpRequest(); xhr.open('get','url') xhr.send(null); xhr.onreadystatechange = function(){   if(xhr.readyState ===4 && xhr.status ===200)   {      let ret = xhr.responseText;      console.log(ret)    }   }  

 

函数封装

上面有data1,data2,data3,三次请求,那么就需要写三个ajax,这时就会想到用函数来封装

function queryData(path,callback){    let xhr = new XMLHttpRequest();    xhr.open('get','url'+path)    xhr.send(null);     xhr.onreadystatechange = function(){       if(xhr.readyState===4 && xhr.status ===200)       {            let ret = xhr.responseText;            callback(ret)       }      } }  //调用 queryData('data1',function(ret){     console.log(ret) })

 

如何形成的回调地狱

如果想按顺序获取接口’data1′,’data2′,’data3′ 中的数据,就会进行下面的操作

queryData('data1',function(ret){    console.log(ret)  //按顺序第一个输出:hi     queryData('data2',function(ret){       console.log(ret)  //第二个输出 hello         queryData('data3',function(ret){           console.log(ret)  //第三个输出:你好        })    }) })  如果这里有100个,1000个,甚至更多的请求呢,那真是一场灾难

 

promise方式

为了改造上面的回调函数问题,诞生了promise.promise其实就是一种语法糖(代码形式发生改变,但是功能不变)  

 

function queryData(path) {   return new Promise(function(resolve, reject) {     // 需要在这里处理异步任务     var xhr = new XMLHttpRequest();     xhr.open('get','http://localhost:3000/' + path);     xhr.send(null);     xhr.onreadystatechange = function() {       // 该函数何时触发?xhr.readyState状态发生变化时       if(xhr.readyState != 4) return;       if(xhr.readyState == 4 && xhr.status == 200) {         // 获取后台数据         var ret = xhr.responseText;         // 成功的情况         resolve(ret);       } else {         // 失败的情况         reject('服务器错误');       }     }   }) }

分析

queryData('data1')   .then(ret=>{     console.log(ret)  // 顺序输出第一个结果为:hi     // 如果在then方法中没有返回Promise实例对象,那么下一个then由默认产生的Promise实例对象调用   })   .then(ret=>{     console.log('-------------------' + ret)  // 顺序输出第二个结果为:----------------------undefined     // 如果在then中显式地返回一个具体数据,那么下一个then可以获取该数据     return 456;   })     .then(ret=>{     console.log('-------------------' + ret)  // 顺序输出第三个结果为:----------------------456   })

promist对象除了.then方法外,还有两个方法可以通过,调用,其中finally是ES&中新增的方法

.catch(ret=>{   // 发生错误时触发   console.log('error') }) .finally(ret=>{   // 无论结果成功还是失败都触发:一般用于释放一些资源   console.log('finally') })

 

async和await 进行解决

function queryData(path) {   return new Promise(function(resolve, reject) {     // 需要在这里处理异步任务     var xhr = new XMLHttpRequest();     xhr.open('get','http://localhost:3000/' + path);     xhr.send(null);     xhr.onreadystatechange = function() {       // 当readyState值不为0的时候直接返回       if(xhr.readyState != 4) return;       if(xhr.readyState == 4 && xhr.status == 200) {         // 获取后台数据         var ret = xhr.responseText;         // 成功的情况         resolve(ret);       } else {         // 失败的情况         reject('服务器错误');       }     }   }) }   async function getAllData() {   // await执行流程是顺序执行   let ret1 = await queryData('data1');   let ret2 = await queryData('data2');   let ret3 = await queryData('data3');   console.log(ret1)   console.log(ret2)   console.log(ret3) } getAllData();

需要注意一点:async函数的返回值是Promise实例对象

async function getAllData() {   // await执行流程是顺序执行   let ret1 = await queryData('data1');   return 'hello'; } var ret = getAllData(); console.log(ret)  // 这里输出一个promise对象,并且resolve的数据为hello ret.then(res=>{   console.log(res)  // 这里输出结果为:hello })

 

以上内容来自:https://www.cnblogs.com/belongs-to-qinghua/p/11161140.html

 

结合promise,做一个小案例,模拟一个对话页面,输入文字,通过接口,获取机器人的对话,同时将对话转为语音放出来

<script>       const baseUrl = "http://www.liulongbin.top:3006";       window.onload = function () {         document           .querySelector("#btnSend")           .addEventListener("click", function () {             let str = document.querySelector("#ipt").value.trim();             if (!str) {               alert("信息不能为空");               return;             }             appendContent(str, "right");             document.querySelector("#ipt").value = "";             //获取机器人信息             getJiQiRXX(str)               .then((res) => {                 appendContent(res.data.info.text);                 return getJiQiYY(res.data.info.text);               })               .then((res) => {                 // console.log("语音内容", res);                 document.querySelector("audio").src = res.voiceUrl;               });           });       };        function getJiQiRXX(spoken) {         return new Promise((resolve, reject) => {           //请求机器人信息           let xhr = new XMLHttpRequest();           xhr.open("get", baseUrl + "/api/robot?spoken=" + spoken);           xhr.send(null);           xhr.onreadystatechange = function () {             if (xhr.readyState === 4) {               if (xhr.status === 200) {                 let data = JSON.parse(xhr.responseText);                 resolve(data);                 // console.log(xhr.responseText);               } else {                 reject("请求失败,请稍后再试");               }             }           };         });       }        function getJiQiYY(text) {         return new Promise((resolve, reject) => {           let xhr = new XMLHttpRequest();           xhr.open("get", baseUrl + "/api/synthesize?text=" + text);           xhr.send(null);           xhr.onreadystatechange = function () {             if (xhr.readyState === 4) {               if (xhr.status === 200) {                 let data = JSON.parse(xhr.responseText);                 resolve(data);               } else {                 reject("请求失败,请稍后再试");               }             }           };         });       }        // function scrollChange() {}       function appendContent(str, who) {         let li = document.createElement("li");         li.className = who === "right" ? "right_word" : "left_word";         li.innerHTML = `<img src="img/${           who === "right" ? "person02.png" : "person01.png"         }" /> <span>${str}</span>`;         document.querySelector("#talk_list").appendChild(li);         //滚动         document.querySelector("#talk_list").scrollTop = document.querySelector(           "#talk_list"         ).scrollHeight;       }     </script>

 

结合async await,做一个小案例,模拟一个对话页面,输入文字,通过接口,获取机器人的对话,同时将对话转为语音放出来

const baseUrl = "http://www.liulongbin.top:3006";       window.onload = function () {         document           .querySelector("#btnSend")           .addEventListener("click", function () {             let str = document.querySelector("#ipt").value.trim();             if (!str) {               alert("信息不能为空");               return;             }             appendContent(str, "right");             document.querySelector("#ipt").value = "";             // //获取机器人信息             // getJiQiRXX(str)             //   .then((res) => {             //     appendContent(res.data.info.text);             //     //获取语音             //     return getJiQiYY(res.data.info.text);             //   })             //   .then((res) => {             //     // console.log("语音内容", res);             //     document.querySelector("audio").src = res.voiceUrl;             //   });             getAllData(str);           });       };        async function getAllData(spoken) {         //获取机器人信息         let res1 = await getJiQiRXX(spoken);         appendContent(res1.data.info.text);         //获取语音信息         let res2 = await getJiQiYY(res1.data.info.text);         document.querySelector("audio").src = res2.voiceUrl;       }        function getJiQiRXX(spoken) {         return new Promise((resolve, reject) => {           //请求机器人信息           let xhr = new XMLHttpRequest();           xhr.open("get", baseUrl + "/api/robot?spoken=" + spoken);           xhr.send(null);           xhr.onreadystatechange = function () {             if (xhr.readyState === 4) {               if (xhr.status === 200) {                 let data = JSON.parse(xhr.responseText);                 resolve(data);                 // console.log(xhr.responseText);               } else {                 reject("请求失败,请稍后再试");               }             }           };         });       }        function getJiQiYY(text) {         return new Promise((resolve, reject) => {           let xhr = new XMLHttpRequest();           xhr.open("get", baseUrl + "/api/synthesize?text=" + text);           xhr.send(null);           xhr.onreadystatechange = function () {             if (xhr.readyState === 4) {               if (xhr.status === 200) {                 let data = JSON.parse(xhr.responseText);                 resolve(data);               } else {                 reject("请求失败,请稍后再试");               }             }           };         });       }        // function scrollChange() {}       function appendContent(str, who) {         let li = document.createElement("li");         li.className = who === "right" ? "right_word" : "left_word";         li.innerHTML = `<img src="img/${           who === "right" ? "person02.png" : "person01.png"         }" /> <span>${str}</span>`;         document.querySelector("#talk_list").appendChild(li);         //滚动         document.querySelector("#talk_list").scrollTop = document.querySelector(           "#talk_list"         ).scrollHeight;       } 

  

 

赞(0) 打赏
未经允许不得转载:张拓的天空 » 异步(二)回调地狱
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏