因为js是单线程语言，所以在遇到一些耗时比较久的任务的时候，如果继续按照顺序执行，就会造成线程的阻塞。所以这个时候就需要用到异步来解决问题。
可以简单地将js中的任务划分为同步任务，异步任务。
- 同步任务：
- 异步任务：
function demo () {
setTimeout({
console.log(1)
},1000)
}
demo()
console.log(2)
最终运行结果
2
1
异步的解决办法
1. callback
function demo(callback) {
setTimeout({
console.log(1)
callback()
},1000)
}
function callback() {
console.log(2)
}
demo()
运行结果
1
2
callback这种模式比较容易理解，但缺点也很明显
- 回调地狱，高耦合，维护起来比较困难
- 每个任务只能执行一个回调函数
- 如果几个异步之间没有顺序之分，同样也要等上一个操作完成之后才能继续
回调地狱
getdata(a=>{
getMoreData(a,b=>{
getMoreData(b,c)=>{
getMoreData(c,d)=>{
getMoreDate(d,e)=>{
console.log(e)
}
}
}
})
})
2.Promise 通过then的链式吊用进行一步步
- new Promise(cb) ===>实例的最基本的使用 pending(进行中) resolved(已成功) rejected(已失败)
- 两个原型方法
- Promise.prototype.catch()
- Promise.prototype.then()
- 两个静态方法
- Promise.all()
- Promise.resolve()
Promise的个人理解，就是先许一个承诺（先开始干，不管结果），然后在后面通过resolve返回正确或者reject返回失败，这样多个回调就可以通过使用链式调用顺序来实现。then捕捉resolve，catch捕捉reject。
不论resolve还是reject 返回的都是promise
catch 和then 都会默认返回一个默认resolved状态的Promise对象
function delay(word) {
return new Promise((reslove,reject)=>{
setTimeout(()=>{
// console.log(word);
reslove(word)
},2000)
})
}
delay('孙悟空').then((word)=>{
console.log(word)
return delay('猪八戒')
}).then((word)=>{
console.log(word)
return delay('沙悟净')
}).then((word)=>{
console.log(word)
})
=>
2s
孙悟空
2s
猪八戒
2s
沙悟净
- .then可以使用链式调用，原因在于：每一次执行该方法时总会返回一个Promise对象。
另外，在then的函数当中的返回值，可以作为后续操作的参数 - 关于执行顺序：Promise在实例化的时候就会执行，也就是如果Promise的实例化语句中函数console.log输出语句，它会比then中的先执行。Promise.all中传入的Promise对象的数组（假设为p1、p2），即使p2的运行速度比p1快，Promise.all方法仍然会按照数组中的顺序将结果返回。
3.Generatol函数
- 函数内部使用使用yield语句, 定义遍历器的每个成员,即不同的内部状态
- 函数命令与函数名之间有个星号
function* fn() {
console.log(1)
let v = yield getData()
console.log(v)
console.log(3)
}
function getData() {
setTimeout(() => {
console.log(2)
f.next(100)
}, 1000)
}
<!-- 返回一个迭代函数 -->
let f = fn()
f.next()
===> 1
<!-- 1000ms后 -->
2
100
3
4. async await
async+await 要一起使用，async定义函数 await要在async函数内部使用，等待一个异步结束
async function start () {
const w1 = await delay('孙悟空')
console.log(w1)
const w2 = await delay('猪八戒')
console.log(w2)
console w3 = await delay('沙悟净')
console.log(w3)
}
start()
<!-- 等你前面结束才执行后面代码 -->
=>
2s
孙悟空
2s
猪八戒
2s
沙悟净
-
async:定义异步函数
- 自动把函数转换为Promise
- 当调用异步函数的时候，函数返回值会reslove处理
- 异步函数内部可以使用await处理
-
await 暂停异步函数的执行
- 当使用在Promise前面时，await等待Promise完成，并返回Promise的结果
- await只能和Promise一起使用，不能和callback一起使用
- await只能用在async函数中
可以使用 try-catch 捕获错误
