JavaScript异步实战

迷南。 2022-03-28 11:39 268阅读 0赞

JavaScript异步系列的篇章到今天为止已经完结了,从回调函数 => Promise => Generator => async,现在呢我们再用同一个例子，分别用这几种异步方法来实现，自己比较下异步技术哪家强

# 准备工作 #

我们先准备好四个接口,  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyOTExNjYz_size_16_color_FFFFFF_t_70]  
四个接口的返回的数据分别为 ：

> 刘家军起床了!  
> 刘家军上班了!  
> 刘家军下班了!  
> 刘家军睡觉了!

我们要实现的顺序就是 起床 => 上班 => 下班 => 睡觉

# 回调函数 #

function ajax(url, sucessC) { 
    	axios.get('https://easy-mock.com/mock/5c249dbe46e8386d0b21b475/example_copy_copy/' + url).then(sucessC)
    }
    // 回调函数
    function getUp(callback) { 
    	ajax('asynctest1', res => { 
    		console.log(res.data.data) 
    		callback && typeof callback == 'function' && callback()
    	})
    }
    function goToWork(callback) { 
    	ajax('asynctest2', res => { 
    		console.log(res.data.data) 
    		callback && typeof callback == 'function' && callback()
    	})
    }
    function offWork(callback) { 
    	ajax('asynctest3', res => { 
    		console.log(res.data.data) 
    		callback && typeof callback == 'function' && callback()
    	})
    }
    function sleep() { 
    	ajax('asynctest4', res => { 
    		console.log(res.data.data)
    	})
    }
    getUp(() => { 
    	goToWork(() => { 
    		offWork(() => { 
    			sleep()
    		})
    	})
    })

我们可以看出 当层级再多时 ，就形成了所谓的回调地狱，而且代码不易维护  
下面我们用Promise再写一遍

# Peomise #

function ajax(url, sucessC) { 
     	axios.get('https://easy-mock.com/mock/5c249dbe46e8386d0b21b475/example_copy_copy/' + url).then(sucessC)
     }
     // promise
     function getUp() { 
     	return new Promise(resolve => { 
     		ajax('asynctest1', res => { 
     			resolve(res.data.data)
     		})
     	})
     }
    
     function goToWork() { 
     	return new Promise(resolve => { 
     		ajax('asynctest2', res => { 
     			resolve(res.data.data)
     		})
     	})
     }
    
     function offWork() { 
     	return new Promise(resolve => { 
     		ajax('asynctest3', res => { 
     			resolve(res.data.data)
     		})
     	})
     }
    
     function sleep() { 
     	return new Promise(resolve => { 
     		ajax('asynctest4', res => { 
     			resolve(res.data.data)
     		})
     	})
     }
     getUp().then(res => { 
     	console.log(res)
     	return goToWork()
     }).then(res => { 
     	console.log(res)
     	return offWork()
     }).then(res => { 
     	console.log(res)
     	return sleep()
     }).then(res => { 
     	console.log(res)
     })

Promise是链式调用，虽然看起来更浅显易懂，但是还是没有避免大量的嵌套，接着我们看下Generator生成器函数

#  Generator生成器函数 #

function ajax(url, sucessC) { 
     	axios.get('https://easy-mock.com/mock/5c249dbe46e8386d0b21b475/example_copy_copy/' + url).then(sucessC)
     }
    // Generator
     function getUp() { 
     	ajax('asynctest1', res => { 
     		console.log(res.data.data)
     		day.next()
     	})
     }
    
     function goToWork() { 
     	ajax('asynctest2', res => { 
     		console.log(res.data.data)
     		day.next()
     	})
     }
    
     function offWork() { 
     	ajax('asynctest3', res => { 
     		console.log(res.data.data)
     		day.next()
     	})
     }
    
     function sleep() { 
     	ajax('asynctest4', res => { 
     		console.log(res.data.data)
     	})
     }
    
     function *generator() { 
     	yield getUp()
     	yield goToWork()
     	yield offWork()
     	yield sleep()
    
     }
     let day = generator()
    
     day.next() // 启动生成器

一般很少有人会通过Generator实现多个异步同步执行，接下来就是我们昨天讲的async

# async #

function getUp() { 
          return axios.get('https://easy-mock.com/mock/5c249dbe46e8386d0b21b475/example_copy_copy/asynctest1').then(res => { 
              console.log(res.data.data)
          })
      }
    
      function goToWork() { 
          return axios.get('https://easy-mock.com/mock/5c249dbe46e8386d0b21b475/example_copy_copy/asynctest2').then(res => { 
              console.log(res.data.data)
          })
      }
    
      function offWork() { 
          return axios.get('https://easy-mock.com/mock/5c249dbe46e8386d0b21b475/example_copy_copy/asynctest3').then(res => { 
              console.log(res.data.data)
          })
      }
    
      function sleep() { 
          return axios.get('https://easy-mock.com/mock/5c249dbe46e8386d0b21b475/example_copy_copy/asynctest4').then(res => { 
              console.log(res.data.data)
          })
      }
        async function day() { 
          await getUp()
          await goToWork()
          await offWork()
          await sleep()
      }
    
      day()

因为axios返回的是个Promise，Promise 被传递给一个 await 操作符，await 将等待 Promise 正常处理完成并返回其处理结果  
以上几个例子都是都是输出：  
![在这里插入图片描述][20190110144138384.png]  
我们说起异步，之前首先想到的是回调函数，但是回调函数存在各种问题， ES6中出现了Promise，解决了回调函数问题，Promise中我们又介绍了几个常用的API  
Promise.then()、Promise.catch()、Promise.all()、Promise.race()、Promise.finally()  
我们后来又介绍了Generator，通过Generator引出了async await，  
async就是Generator的语法糖，简化了Generator的使用方法  
async无法取代Promise，async的使用依赖于Promise  
有人说async await是处理异步的终极方案，这个说法有些极端  
处理异步的方法我们介绍很多，没有最好的，只有最合适的  
会的多了，选择也就多了，代码质量自然就会高  
所以，这几种异步的处理方式我们都要学会  
关于JS异步系列的讲解，就介绍到这里了，如果还有什么不了解的就多回顾我之前的篇章

友情链接：[点击查看所有文章目录][Link 1]

友情链接：[点击查看　JavaScript异步系列文章目录][JavaScript]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyOTExNjYz_size_16_color_FFFFFF_t_70]: /images/20220328/56d4e6a4373d4c8597c365368743d64a.png
[20190110144138384.png]: /images/20220328/b9c2a7e5a3af44de9df49b67e6149b63.png
[Link 1]: https://blog.csdn.net/qq_42911663/article/details/86365901
[JavaScript]: https://blog.csdn.net/qq_42911663/article/details/86369813