Skip to content
鼓励作者:欢迎打赏犒劳

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

如有转载或 CV 的请标注本站原文地址