前言:
眼前我们对“如何解决ajax回调地狱问题的方法”大约比较关切,小伙伴们都需要剖析一些“如何解决ajax回调地狱问题的方法”的相关文章。那么小编在网摘上搜集了一些关于“如何解决ajax回调地狱问题的方法””的相关内容,希望同学们能喜欢,朋友们快快来了解一下吧!并发和并行
并行和并发是两个概念,容易混淆是因为并行和并发在中文意思上相近,其实在英文中,这是完全不相同的东西,并行(parallelism)、并发(concurrency)。
并行(parallelism):是微观概念,假设CPU有两个核心,则我们就可以同时完成任务A和任务B,同时完成多个任务的情况就可以称之为并行。
并发(concurrency):是宏观概念,现在有任务A和任务B,在一段时间内,通过任务之间的切换完成这两个任务,这种情况称之为并发。
回调函数
回调函数广泛存在于我们所编写的JavaScript代码中,它表现在事件绑定,Ajax请求或者其他的情况下,一个回调函数可表现成如下形式
ajax(url, () => { console.log('这里是回调函数');})
回调地狱: 回调函数很好的解决了某些异步情况,但过度滥用回调函数会造成回调地狱,即回调函数过长,嵌套过深。过长或者嵌套过深的回调函数,会让回调函数存在强耦合关系,一旦有一个函数有所改动,那么可能会牵一发而动全身。一个回调地狱可能如下所示:
ajax(firstUrl, () => { console.log('这里是首次回调函数'); ajax(secondUrl, () => { console.log('这里是第二次回调函数'); ajax(threeUrl, () => { console.log('这里是第三次回调函数'); // todo更多 }) })})Generator
在ES6之前,一个函数一旦执行将不会被中断,一直到函数执行完毕,在ES6之后,由于Generator的存在,函数可以暂停自身,待到合适的机会再次执行。用Generator可以解决回调地狱。
function *fetch() { yield ajax(url, () => {console.log('这里是首次回调函数');}); yield ajax(url, () => {console.log('这里是第二次回调函数');}); yield ajax(url, () => {console.log('这里是第三次回调函数');});}var it = fetch();var result1 = it.next();var result2 = it.next();var result3 = it.next();Promise
Promise翻译过来就是承诺的意思,Promise一共有三种状态:pending(等待中)、resolve(完成)和reject(拒绝),这个承诺意味着在将来一定会有一个表决,并且只能表决一次,表决的状态一定是resolve(完成)或者reject(拒绝),一个Promise可能会是如下的形式:
// 普通的Promisefunction foo() { return new Promise((resolve,reject) => { // 第一次表决有效,其后无论是resolve()还是reject()都无效 resolve(true); resolve(false); })}// Promise解决回调地狱ajax(url).then(res => { console.log('这里是首次回调函数');}).then(res => { console.log('这里是第二次回调函数');}).then(res => { console.log('这里是第三次回调函数');})async/await
如果一个方法前面加上了async,那么这个方法就会返回一个Promise,async就是将函数用Promise.resolve()包裹了下,并且await只能配合async使用,不能单独出现。一个async/await可能会是如下的形式:
// 普通的async/awaitasync function foo() { let number = await 3; // await自动用promise.resolve()包装 console.log(number);}foo();// async/await解决回调地狱async function fetch() { var result1 = await ajax(url1); var result2 = await ajax(url2); var result3 = await ajax(url3);}fetch();
如若转载,请注明出处:开源字节
标签: #如何解决ajax回调地狱问题的方法