- 基本用法
- async/await 是什么
- async/await是ES2017 新增加的两个关键字
- async 异步
- 可以声明一个 async 函数,表示函数里有异步操作
- 一般只有在 async 函数中才能使用 await
- async function fn() {}
- await 异步等待
- 等待一个异步操作
- 表示紧跟在 await 后面的是异步的,需要等待结果
- await 需要和 async 一起使用
- 例子
- async function fn() {
- const result = await 异步操作(Promise 对象)
- ...
- }
- 作用
- 使异步(Promise)操作更简洁、更方便
- 使异步代码看起来像同步的,更容易理解
- async 函数
- async 函数的返回值
- async 函数的返回值是 Promise 对象
- async 函数内部 return 后面的值,如果不是 Promise 对象,相当于包了一层 Promise.resolve() 再返回;如果是 Promise 对象,直接返回该 Promise 对象
- async 函数的各种形式
- 函数声明
- function fn(){}
- async function fn(){}
- 函数表达式
- const fn = function () {};
- const fn = async function () {};
- 箭头函数
- const fn = () => {};
- const fn = async () => {};
- const fn = param => {};
- const fn = async param => {};
- 对象的方法
- const obj = {
- //fn:function(){},
- fn:async function({}‘)
- }
- Class的方法
- class ClassName {
- // fn(){}
- async fn() {}
- }
- 函数声明
- 3.async 函数的注意事项
- 可以通过 try...catch 或者 Promise...catch 的方式来处理错误
- async 函数中可以没有 await
- async 函数的返回值
- await函数
- await 的机制
- async 函数中的代码有先后关系,await 会阻塞该 async 函数中代码的执行,async 函数外的代码不受影响
- async 函数内部是同步执行的,它本身是异步的
- await 的值
- 如果 await 后面是一个 Promise 对象,await 的值就是该 Promise 对象的结果(PromiseResult)
- 如果 await 后面不是 Promise 对象,await 的值就是该值,相当于包了一层 Promise.resolve() 之后再获取该 Promise 对象的结果
- 3.await 的注意事项
- async 函数内部所有 await 后面的 Promise 对象都成功,async 函数返回的 Promise 对象才会成功;只要任何一个 await 后面的 Promise 对象失败,那么 async 函数返回的 Promise 对象就会失败
- 可以通过 try...catch 或者 Promise...catch 的方式来处理错误
- await 一般只能用在 async 函数中,async 函数中可以没有 await,有的浏览器也可以用在模块的最顶层,借用 await 解决模块异步加载的问题
- await 的机制
- 继发和并发
- 使用 async/await 处理并发问题
- 处理异步操作时,如果不存在继发关系,最好让它们并发执行
- 可以先执行异步操作,再 await 等待结果
- 也可以通过 Promise.all 让异步操作并发执行
- 继发
- const { data } = await getJSON(${url}js);
- console.log(data);
- const result = await getJSON(`${url}json`);
- console.log(result);
- 并发
- const jsPromise = getJSON(${url}js);
- const jsonPromise = getJSON(${url}json);
- const jsResult = await jsPromise;
- const jsonResult = await jsonPromise;
- console.log(jsResult, jsonResult);
- Promise.all 并发
- Promise.all([getJSON(${url}js), getJSON(${url}json)]).then(
- datas => {
- console.log(datas);
- }
- );
- 使用 async/await 处理并发问题
- async/await 是什么
async和await
最新推荐文章于 2024-05-23 16:36:45 发布