参考视频:异步编程: 一次性搞懂 Promise, async, await (#js #javascript)_哔哩哔哩_bilibili
async、await 与 Promise【JS面试题】_哔哩哔哩_bilibili
如果还不会,就花7小时仔细自学:Promise从入门到自定义(promise前端进阶必学)_哔哩哔哩_bilibili
会慢慢更新的哈~
1.JS在设计之初就是单线程的编程语言
2.Promise为何产生:解决回调地狱的问题
比如在一个定时器函数里面再写一个定时器函数,层层嵌套下去:
setTimeout(() => {
console.log("等三秒后")
setTimeout(() => {
console.log("再等三秒后")
setTimeout(() => {
console.log("再再等三秒后")
//........
},3000)
},3000)
},3000)
console.log("我现在就出现")
这样套下去,代码是在中间不断填补的,
但如果用Promise,只需要.then().then().then().then().......这样链式结构就可以了
3.Promise输出是这样的:
重点是PromiseResult
4.所有async开头的函数是异步函数,而异步函数返回值return出来的都是一个Promise
async await是一对,所以await不能单独使用,需要在async 的函数体中使用
比如下面函数:
async function test1(){
return 1
}
即使返回值是一个常数1,但因为函数前面加了async,所以返回值会被包装成一个Promise的形式, 此时打印return返回值:
const result1 = test1()
console.log(result1)
输出的是一个Promise:
5.Promise.then()成功的情况,对应await
这样说可能理解不了,上代码:
比如我先定义一个异步函数test:
async function test(){
}
在里面定义一个Promise:
async function test(){
const p3 = Promise.resolve(1)
}
再用then()执行Promise成功后的结果(执行then()这个括号里面的回调函数,参数data是PromiseResult的值):
async function test(){
const p3 = Promise.resolve(1)
p3.then(data =>{
console.log('我是data',data)//输出为1
})
}
如果用await执行,则可以直接写:
const data1 = await p3
因为await+Promise = 成功后的PromiseResult
最后看一下data1输出的是什么:
console.log('我是data1',data1)//输出1
6..then()成功之后,.catch()失败之后,finally()在Promise链结束之后
7.如果在一个异步函数(以async开头的函数)里面获取两次Promise
async function test(){
const promiseA = fetch('http://......')
const promiseB = fetch('http://......')
}
那么可以用.all()同时请求,这样速度会快两倍
const[a,b] = await Promise.all([promiseA,promiseB])