js ES6之async和await理解及使用

保持对代码的热爱并保持怀疑态度

async("/əˈsɪŋk/"),await的概念

async和await是用来处理异步的。当你需要异步像同步一样执行，需要异步返回结果之后，再往下依据结果继续执行。
async 是“异步”的简写，而 await 可以认为是 async wait 的简写。
async 用于申明一个 function 是异步的，而 await 用于等待一个异步方法执行完成。

async的写法（a沈克）此乃中文歪读

直接声明,表示这个函数是异步的。

async function 函数名(){
}

然后里面可以直接执行代码，但是这不是重点，重点是它的返回值

async的返回值

    async function look(){
        // console.log(1);
    }
    
    const a=look();
    console.log(a);

当没有返回值的时候，为underfined

当有返回值是一个Promise对象

    async function look(){
        return "asd";

    }

    const a=look();
    console.log(a);

既然返回的是一个promise对象
那是不是就可以使用pormise的then，和catch来处理了呢？没错就是这样
点击查看promise的语法及使用

成功后执行，then()

    async function look(){
        return "asd";

    }


    look().then(a=>{
        console.log(a);
    })

失败后执行 catch()

    async function look(){
        return "asd";

    }


    look().then(a=>{
        console.log(ab);   故意写错
    }).catch((a)=>{
        console.log(a);
    })

await

await只能放在async函数内部使用,不然是会报错的

await 用于一个异步操作之前，表示要“等待”这个异步操作的返回值。

await 也可以用于一个同步的值。

如果它等到的不是一个 Promise 对象，那 await 表达式的运算结果就是它等到的东西。

如果它等到的是一个 Promise 对象，await 就会阻塞后面的代码，等着 Promise 对象 resolve，然后得到 resolve 的值，作为 await 表达式的运算结果。

同步代码

const a = await '123'
// 相当于
const a = await Promise.resolve('hello world');
// 所以直接写同步代码即可，不需要await关键字
const a = '123';

异步代码

function fn(num) {      //返回的是一个promise
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(100-num)
        }, 2000);
    })
}

async function testResult () {   //表示异步
如果它等到的是一个 Promise 对象，await 就会阻塞后面的代码，**等着 Promise 对象 resolve**，然后得到 resolve 的值，作为 await 表达式的运算结果。
    let result = await fn(10);
    console.log(result);
}

testResult();
// 2s 之后，返回90 

案例

// 2s 之后返回双倍的值
function doubleAfter2seconds(num) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(2 * num)
        }, 2000);
    })
}

async function testResult () {
    console.log('内部调用前') // 2
    let result = await doubleAfter2seconds(30);
    console.log(result); // 4
    console.log('内部调用后') // 5
}

console.log('外部调用前') // 1
testResult();
console.log('外部调用后') // 3

分析：
分析一下上面的执行顺序：
1、首先打印输出外部调用前，同步代码，顺序执行。
2、然后调用方法testResult()，打印输出内部调用前，同步代码，顺序执行。
3、再执行异步方法doubleAfter2seconds，
　1>如果没用await关键字，此后的执行顺序应该是
　　内部调用后，外部调用后，2s 之后输出60
　　因为异步方法不阻塞其他代码的执行，最后再输出60
　2>这里使用了await关键字，所以到这里后会等待异步返回结果，再往下执行。
4、当testResult函数内部await阻塞执行后，不会影响到testResult函数外面

async 函数调用不会造成阻塞，它内部所有的阻塞都被封装在一个 Promise 对象中异步执行。

所以，在调用testResult函数后，会继续向下执行，打印输出外部调用后
5、当2s之后，异步函数doubleAfter2seconds执行完成，返回结果，
打印输出60
6、因为await将异步变成同步，所以在输出60后，同步执行，再输出内部调用后

错误处理

方式一 统一处理

// 2s 之后返回双倍的值
function doubleAfter2seconds(num) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(2 * num)
        }, 2000);
    })
}

async function testResult () {
    let first = await doubleAfter2seconds(10);
    let second = await doubleAfter2seconds(20);    
    let res = first + second;
    return res;   返回出去
}

testResult().then(res => {
    console.log(res);      
}).catch(error => {
    console.log(error);     
});

方式二 try…catch

try里面为正常执行，catch里为错误执行

// 2s 之后返回双倍的值
function doubleAfter2seconds(num) {
   return new Promise((resolve, reject) => {
       setTimeout(() => {
           resolve(2 * num)
       }, 2000);
   })
}

async function testResult () {
   try {
       let first = await doubleAfter2seconds(10);
       let second = await doubleAfter2seconds(20);    
       let res = first + second;
       return res;
   } catch (error) {
       console.log(error);
   }
}
testResult()

在接口中使用(axios)

created () {
    this.init()
},
methods: {
    async init () {
      try {
          let first = await this.getOne();
          let second = await this.getTwo();    
          let res = first + second;
          console.log(res);
      } catch (error) {
          console.log(error);
      }        
    },
    getOne () {
        const params = {name: 'one'}
        return new Promise((resolve, reject) => {
            axios.get('/one', { params}).then((res) => {
                if (res.status === 200) {
                    resolve(res)
                }
            }).catch((err) => {
                reject(err)
            })
        })
    },
    getTwo () {
        const params = {name: 'two'}
        return new Promise((resolve, reject) => {
            axios.get('/two', { params}).then((res) => {
                if (res.status === 200) {
                    resolve(res)
                }
            }).catch((err) => {
                reject(err)
            })
        })
    },
},