async await

async 函数 & await

1. async含义

async 函数，以同步的方式操作异步代码，使异步操作变得更加方便。

2. async的使用

async function show (){
    await '33'
}
let p1 = show();

2.1 await配合async使用

async function fn(){  // async 表示异步,这个函数里面有异步的任务
    let result = await xxxx;  // 表示等待await后面的结果需要等待,等出来在处理
}

4. async 的特点

1. await 只能放到async函数中使用
2. await后面可以是promise对象,也可以是数字,字符串,布尔值
3. async 函数返回的是一个promise对象
4. 只要await 语句后面的Promise的状态变成reject,那么整个async函数会中断执行

4.1 验证async函数返回一个promise对象

async function fn(){

}
console.log(fn());  //Promise

// 使用
async function fn(){
	return 'welcome';
}
fn().then(res => {
    console.log(res);    // welcome
})

4.2 如果async函数中出错

async function fn(){
    throw new Error('Error 出错了')
}
fn().then(res => {
    console.log(res);
}).catch(err => {
    console.log(err);  //  Error 出错了
})

4.3 如果await后面的语句出错,函数后面将中断执行

错误在成功之后,错误和成功都会执行

let fn = async function() {
    let data = await Promise.resolve('success');
    console.log(data)
    await Promise.reject('fail');
}
fn().then(data => console.log(data)).catch(err => console.log(err))

但是如果错误在前,成功将不会执行

async function fn(){
    await Promise.reject('出错了')
    let a = await Promise.resolve("成功了");
    console.log(a);
}
fn().then(res => {
    console.log(res);
}).catch(err => {
    console.log(err);   
})
// 打印结果
// 出错了

5. 解决async函数中的报错

如何解决async函数中抛出错误,影响后续代码执行;

这个问题比较严重,虽然是async的特点,但是我又不知道程序什么时候出错,所以我不希望出错的代码影响我后续运行

5.1使用 try { } catch (){}

1. 了解 try{} catch(err){}

try{}用来检测里面的代码,如果出现报错,会直接被catch捕获

catch(err){} 参数err就是捕获的错误,这个错误有两个属性,name,message

name: 错误的类型

message: 错误的信息

2. 错误的类型

JS常用的错误类型

ReferenceError 引用错误

TypeError 类型错误

SyntaxError 语法错误

3. 抛出错误

关键词 throw

就是将错误抛到浏览器的控制台中

4. 创建一个错误

new 关键字

创建一个新的错误

例子:

async function fn(){
    try{
        await Promise.reject('出错了')
    }catch(e){
        let a = await Promise.resolve("成功了");
        console.log(a);
    }
}

5.2 添加catch 捕获错误

本来await后面的就是promise,那么我们就可以直接使用catch处理

async function fn(){
    await Promise.reject('出错了').catch(err=>{
        console.log(err);
    })
    let a = await Promise.resolve("成功了");
    console.log(a);
}

其实跟网络打交道的都不保险,你不可能给每一个await后面的promise对象都加catch

5.3 统一捕获错误

个人建议,只要有await的地方都try catch掉 然后统一处理结果

try {
    let f1 = await Promise.resolve('成功了');
    let f2 = await Promise.resolve('成功了');
    let f3 = await Promise.reject('出错了');
}catch(e){}

5.4 也可以是用Promise.all()方法

如果你多次请求的数据之间没有关联,就可以使用Promise.all()

// async 
async function fn(){
    let [f1,f2,f3] = await Promise.all([
        Promise.resolve('成功了1'),
       	Promise.resolve('成功了2'),
        Promise.resolve('成功了3')
    ])


    console.log(f1);
    console.log(f2);
    console.log(f3);
}
fn();

同时配合解构处理

例子:

async function show() {
    let p1 = await new Promise((res, rej) => {
        $.ajax({
            url: 'https://jsonplaceholder.typicode.com/todos/1',
            success: function(data) {
                res(data)
            },
            error: function(err) {
                rej()
            }
        })
    });
    console.log(p1)
    let p2 = await new Promise((res, rej) => {
        $.ajax({
            url: 'https://jsonplaceholder.typicode.com/todos/2',
            success: function(data) {
                res(data)
            },
            error: function(err) {
                rej()
            }
        })
    });
    console.log(p2)

}

let pp = show()