async/await你是否真的明白

客官°小女子只卖身不卖艺 2022-01-20 03:51 169阅读 0赞

### async 函数总是返回一个 Promise 对象,所以你可以用then去处理结果 ###

#### 1. async函数中返回的是promise ####

function sleep () {
       return new Promise(resolve => {setTimeout(resolve,3000,2)})
     }
     async function f1() {
       return await sleep()
     }
    
    console.log(f1());   // 见下图
    f1().then(res => console.log(res))  // 2
    复制代码

#### 2. async函数中返回的不是promise ####

async function f1() {
     return 'hello world'
    }
    
    console.log(f1()); // 见下图
    f1().then(res => console.log(res)) // 'helle world'
    复制代码

从结果中可以看到async函数返回的是一个promise对象，如果在函数中 return 一个直接量，async 会把这个直接量通过 Promise.resolve() 封装成 Promise 对象

#### 3. 如果asyn函数没有返回值 ####

async function foo() {
      console.log(1)
    }
    
    console.log(foo());
    复制代码

### async 函数返回的 Promise 对象，必须等到内部所有的 await 命令的 Promise 对象执行完，才会发生状态改变 ###

也就是说，只有当 `async` 函数内部的异步操作都执行完，才会执行 `then` 方法的回调。

const delay = timeout => new Promise(resolve=> setTimeout(resolve, timeout));
    async function f(){
        await delay(1000);
        await delay(2000);
        await delay(3000);
        return 'done';
    }
    
    f().then(v => console.log(v)); // 等待6s后才输出 'done'
    复制代码

### 正常情况下，await 命令后面跟着的是 Promise ，如果不是的话，也会被转换成一个 立即 resolve 的 Promise ###

async function  f() {
        return await 1
    };
    f().then( (v) => console.log(v)) // 1
    复制代码

如果返回的是 `reject` 的状态，则会被 `catch` 方法捕获。

--------------------

### Async 函数的错误处理 ###

// 正确的写法
    // 模拟ajax的函数
    function ajax () {
        return new Promise((resolve, reject) => setTimeout(reject,2000,1))
    }
    async function correct() {
        let a;
        try {
            a = await ajax()
        } catch (error) {
            throw new Error('ajax接口错误:'+error)
        }
        console.log(a)
        console.log(465)
    }
    
    correct()
    复制代码

**他会阻止后面的代码继续执行**

### await做了什么处理 ###

从字面意思上看await就是等待，await 等待的是一个表达式，这个表达式的返回值可以是一个promise对象也可以是其他值。

> 很多人以为await会一直等待之后的表达式执行完之后才会继续执行后面的代码，实际上await是一个让出线程的标志。await后面的紧跟(函数)会先执行一遍，这里说的await后面的函数,是紧跟在await后的,然后就会跳出整个async函数来执行后面js栈（后面会详述）的代码。等本轮事件循环执行完了之后又会跳回到async函数中等待await 后面表达式的返回值，如果返回值为非promise则继续执行async函数后面的代码，否则将返回的promise放入promise队列（Promise的Job Queue）

#### async/await 执行顺序 ####

结果:

test start...
    执行testSometing
    promise start..
    test end...
    testSometing
    执行testAsync
    promise
    hello async
    testSometing hello async
    复制代码

这个就是在async/await 函数之后js的执行顺序，我们再看一个列子把testSometing函数前面加上async

async function testSometing() {
        console.log("执行testSometing");
        return "testSometing";
    }
    
    async function testAsync() {
        console.log("执行testAsync");
        return Promise.resolve("hello async");
    }
    
    async function test() {
        console.log("test start...");
        const v1 = await testSometing();
        console.log(v1);
        const v2 = await testAsync();
        console.log(v2);
        console.log(v1, v2);
    }
    
    test();
    
    var promise = new Promise((resolve)=> { console.log("promise start.."); resolve("promise");});//3
    promise.then((val)=> console.log(val));
    
    console.log("test end...")
    复制代码

结果:

test start...
    执行testSometing
    promise start..
    test end...
    promise
    testSometing
    执行testAsync
    hello async
    testSometing hello async
    复制代码