async await |
您所在的位置：网站首页 › promise实现多个异步请求 › async await |
|
js中实现异步的方式有两种 第一种是利用传统的回调函数 ， 比如setTimeout; 缺点：执行多个回调操作时，可能会进入回调地狱； -promise fetch('') .then(res => res.json()) .then(json => console.log(json)) .then... .catch((error) => { console.error(error) }) .finally(() => { }) 链式结构，其会在上一个程序执行完毕后，再执行，避免回调地狱以及层层嵌套； .catch() //链式调用的末尾 .finally() //无论程序执行成功与否，finally()都会被调用； fetch('') .then(res => res.json()) .then(json => console.log(json)) .then... .catch((error) => { console.error(error) }) .finally(() => { }) 链式结构，其会在上一个程序执行完毕后，再执行，避免回调地狱以及层层嵌套； .catch() //链式调用的末尾 .finally() //无论程序执行成功与否，finally()都会被调用；-async await -首先需要使用async关键字将函数变为一个异步函数 async function f(){ const response = await fetch('') const json = await response.json() //4行代码 会在 3行代码 结束运行之后执行； } f()-await 使用陷阱 -陷阱一 async function f(){ const a = await fetch(''); const b = await fetch(''); //虽然不存在逻辑上的错误，但是其会打破两个请求的并行； 第 3 行代码 会在 第 2 行代码执行完毕后执行； } 解决一 async function f(){ const promiseA = fetch(''); const promiseB = fetch(''); const [a,b] = await Promise.all([promiseA,promiseB])//可以实现两个请求的并行 } -陷阱二 不能在全局或者普通函数中使用await关键字， await someAsyncOperation(); x 解决二 使用之前必须先定义一个异步函数 async function f(){ } f() -陷阱三 在循环中执行异步操作，是不能直接调用forEach/map这种方法的(如下) async function f(){ [1,2,3].forEach(async (i) => { await someAsyncOperation(); }) } f() 解决三 async function f(){ for(async (let i of [1,2,3]) => { await someAsyncOperation(); }) } f() 更近一步 如果希望循环中的所有操作都并发执行 async function f(){ const promises = [ someAsyncOperation(), someAsyncOperation(), someAsyncOperation() ]; for await(let result of promises){ } } f() |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |