es6的Promise语法
教程:https://www.freecodecamp.org/chinese/news/javascript-promise-async-await/
async/await
async函数内阻塞,函数外不阻塞
async定义在函数声明之前,使函数变成异步函数,其返回一个Promise对象;await关键字用于等待一个Promise对象,它只能在async函数中才起作用。通过使用它们,让异步代码看起来更像是老式同步代码
Async/await:是一个用同步思维解决异步问题的方案
- 会自动将常规函数转换成Promise,返回值也是一个Promise对象
- 只有async函数内部的异步操作执行完,才会执行then方法指定的回调函数
- 异步函数内部可以使用await
- await 放置在Promise调用之前,await 强制后面点代码等待,直到Promise对象resolve,得到resolve的值作为await表达式的运算结果
- await只能在async函数内部使用,用在普通函数里就会报错
- 和Promise相比较
相同点:
- 为了解决异步流程问题,promise是约定,而async更优雅
async函数返回一个promise对象,可以使用then方法添加回调函数
js
async function test(){
return '张三'
}
// async返回的是一个promise对象,如果async函数没有返回值,async函数返回一个undefined的promise对象
test().then(res=>{
console.log(res);//张三
})
当函数执行的时候,一旦遇到await就会返回,等到异步操作完成,再接着执行函数体内后面的语句
js
async function test(){
return '张三'
}
async function test1() {
let a = await test()
console.log(a)
}
test1() // 张三
Promise
创建Promise
js
new Promise(function(resolve, reject) {
if (/* 异步操作成功 */) {
resolve(value); //将Promise的状态由padding改为fulfilled
} else {
reject(error); //将Promise的状态由padding改为rejected
}
})
调用
js
promise
.then((result) => {
//promise被接收或拒绝继续执行的情况
})
.catch((error) => {
//promise被拒绝的情况
})
.finally (() => {
//promise完成时,无论如何都会执行的情况
})
await 会获取到 Promise的resolve的入参
js
function a() {
return new Promise((resolve, reject) => {
setTimeout(() => { console.log('a执行'); resolve(3) }, 3000)
});
}
function b() {
return new Promise((resolve, reject) => {
setTimeout(() => { console.log('b执行'); resolve(20) }, 2000)
});
}
async function doIt() {
try { // async方法会吞掉所有报错信息,如果此例子中b()返回的是reject,不使用try...catch的话,无法获取到错误信息
const res1 = await a();
const res2 = await b(); // 这样的写法是不是很符合同步思维呢
console.log(res1 + res2);
} catch (err) {
console.log(err)
}
}
// Promise 方法调用
// function doIt() {
// a().then(res1 => {
// return b().then(res2 => {
// console.log(res1 + res2)
// })
// }).catch(err => {
// console.log(err)
// })
// }
// async/await方式调用
doIt(); // a执行 b执行 23