asyncawait

async 函数 & await

1. async含义

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

async 函数是 Generator 函数的语法糖。

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 的特点

await 只能放到async函数中使用相比generator 语义化更强await后面可以是promise对象,也可以是数字,字符串,布尔值async 函数返回的是一个promise对象只要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()