1.回调函数(callback)
setTimeout(() => {
//回调函数内部
}, 1000)
缺点
-
回调地狱
-
不能用try catch捕获错误
-
不能return
回调地狱的根本问题在于:
- 缺乏顺序性:回调地狱导致调试困难,和大脑的思维方式不符
- 嵌套函数存在耦合,一旦有所改动,牵一发动全身(控制反转)
- 嵌套函数过多的话,很难处理错误
优点
- 解决了同步的问题
2.Promise
Promise就是为了解决callback所产生的问题
Promise实现了链式调用,也就是说每次then后返回的都是一个全新的Promise,如果我们在then中return,return 的结果会被 Promise.resolve() 包装
优点:解决了回调地狱
axios.get(url1)
.then(res => {
//操作
return axios.get(url2)
}).then(res => {
//操作
return axios.get(url3)
}).then(res => {
//操作
})
缺点:无法取消Promise,错误需要通过catch来捕获
3.Generator
可控制函数的执行
function *fetch() {
yield ajax('XXX1', () => {})
yield ajax('XXX2', () => {})
yield ajax('XXX3', () => {})
}
let it = fetch()
let result1 = it.next()
let result2 = it.next()
let result3 = it.next()
4.async/await
异步终极解决方案
优点:代码清晰,处理了回调地狱的问题
缺点:await将异步改成同步代码,如果多个异步操作没有依赖性而使用 await 会导致性能上的降低。
async function test() {
// 以下代码没有依赖性的话,完全可以使用 Promise.all 的方式
// 如果有依赖性的话,其实就是解决回调地狱的例子了
await fetch('XXX1')
await fetch('XXX2')
await fetch('XXX3')
}