ES7 之 Async/await 的使用（改进 Promise 链式操作）

最新推荐文章于 2024-04-25 16:14:14 发布
最新推荐文章于 2024-04-25 16:14:14 发布
阅读量92 收藏 1
点赞数
文章标签： json javascript ViewUI
原文链接：http://www.cnblogs.com/cckui/p/9915604.html
版权

在 js 异步请求数据时，通常，我们多采用回调函数的方式解决，但是，如果有多个回调函数嵌套时，代码显得很不优雅，维护成本也相应较高。 ES6 提供的 Promise 方法和 ES7 提供的 Async/Await 语法糖可以更好解决多层回调问题。

Promise 对象用于表示一个异步操作的最终状态（完成或失败），以及其返回的值。
await 操作符用于等待一个Promise 对象。它只能在异步函数 async function 中使用。
await 表达式会暂停当前 async function 的执行，等待 Promise 处理完成。若 Promise 正常处理(fulfilled)，其回调的resolve函数参数作为 await 表达式的值，继续执行 async function。

一个ajax请求时

通常 使用 ajax 请求数据时，会

$.ajax({
    url: 'data1.json',
    type: 'GET',
    success: function (res) {
        console.log(res) // 请求成功，则得到结果res
    },
    error: function(err) {
        console.log(err)
    }
})

上面可以得到我们想要的结果 res ---> { "url": "data2.json" }

多个ajax请求时

但是 当得到的数据 res 需要用于另一个 ajax 请求时，则需要如下写法：

$.ajax({
    url: 'data1.json',
    type: 'GET',
    success: function (res) {
        $.ajax({
            url: res.url, // 将 第一个ajax请求成功得到的res 用于第二个ajax请求
            type: 'GET',
            success: function (res) {
                $.ajax({
                    url: res.url,  // 将第二个ajax请求成功得到的res 用于第三个ajax请求
                    type: 'GET',
                    success: function (res) {
                        console.log(res)   // {url: "this is data3.json"}
                    },
                    error: function(err) {
                        console.log(err)
                    }
                })
            },
            error: function(err) {
                console.log(err)
            }
        })
    },
    error: function(err) {
        console.log(err)
    }
})

上面出现多个回调函数的嵌套，可读性较差（虽然这种嵌套在平常的开发中少见，但是在node服务端开发时，还是很常见的）

优化方法

使用 promise 链式操作

如下，使用 Promise，进行链式操作，可以使上面的异步代码看起来如同步般易读，从回调地狱中解脱出来。。

function ajaxGet (url) {
    return new Promise(function (resolve, reject) {
        $.ajax({
            url: url,
            type: 'GET',
            success: function (res) {
                resolve(res);
            },
            error: function(err) {
                reject('请求失败');
            }
        })
    })
};

ajaxGet('data1.json').then((d) => {
    console.log(d);       // {url: "data2.json"}
    return ajaxGet(d.url);
}).then((d) => {
    console.log(d);       // {url: "data3.json"}
    return ajaxGet(d.url);
}).then((d) => {
    console.log(d);       // {url: "this is data3.json"}
})

注意，promise 返回的仍然是 promise

下面两种方式的等效的：

1. 直接使用 promise

    function ajaxPromiseGet(url) {
        return new Promise(function (resolve, reject) {
            $.ajax({
                url: url,
                type: 'GET',
                success: function (res) {
                    resolve(res)
                },
                error: function (err) {
                    reject('请求失败')
                }
            })
        })
    }

 
    ajaxPromiseGet(`/products/list/`).then(list => {
        if (list) {
            console.log(list)
        }
    })

2. 当需要先统一处理 promise 返回值时

function ajaxPromiseGet(url) {
    return new Promise(function (resolve, reject) {
        $.ajax({
            url: url,
            type: 'GET',
            success: function (res) {
                resolve(res)
            },
            error: function (err) {
                reject('请求失败')
            }
        })
    })
}

// 先统一处理 promise 
function handleList () {
    let ajaxReault = ajaxPromiseGet(`/products/list/`)
    return ajaxReault.then(list => {
        return list.filter(item => item.status == 0)
    })
}

handleList().then(list => {
    if (list) {
        console.log(list)
    }
})

Async/await 方法

  • async 表示这是一个async函数，即异步函数，await只能用在这个函数里面。
  • await 表示在这里等待promise返回结果了，再继续执行。
  • await 后面跟着的应该是一个promise对象（当然，其他返回值也没关系，只是会立即执行，不过那样就没有意义了…）
  • await 操作符用于等待一个Promise 对象。它只能在异步函数 async function 中使用。
  • await 等待的虽然是promise对象，但不必写.then(..)，直接可以得到返回值。

执行一个ajax请求，可以通过如下方法：

function ajaxGet (url) {
    return new Promise(function (resolve, reject) {
        $.ajax({
            url: url,
            type: 'GET',
            success: function (res) {
                resolve(res)
            },
            error: function(err) {
                reject('请求失败')
            }
        })
    })
};

async function getDate() {
    console.log('开始')
    let result1 = await ajaxGet('data1.json');
    console.log('result1 ---> ', result1); // result1 --->  {url: "data2.json"}
};

getDate();  // 需要执行异步函数

执行多个ajax请求时：

function ajaxGet (url) {
    return new Promise(function (resolve, reject) {
        $.ajax({
            url: url,
            type: 'GET',
            success: function (res) {
                resolve(res)
            },
            error: function(err) {
                reject('请求失败')
            }
        })
    })
};

async function getDate() {
    console.log('开始')
    let result1 = await ajaxGet('data1.json');
    let result2 = await ajaxGet(result1.url);
    let result3 = await ajaxGet(result2.url);
    console.log('result1 ---> ', result1); // result1 --->  {url: "data2.json"}
    console.log('result2 ---> ', result2); // result2 --->  {url: "data3.json"}
    console.log('result3 ---> ', result3); // result3 --->  {url: "this is data3.json"}
};

getDate();  // 需要执行异步函数

async await捕捉错误:

  • async await中.then(..)不用写了，那么.catch(..)也不用写，可以直接用标准的try catch语法捕捉错误。

例如，如果下面的 url 写错了

function ajaxGet (url) {
    return new Promise(function (resolve, reject) {
        $.ajax({
            url: url111, // 此处为错误的 url
            type: 'GET',
            success: function (res) {
                resolve(res)
            },
            error: function(err) {
                reject('请求失败')
            }
        })
    })
};


async function getDate() {
    console.log('开始')
    try {
        let result1 = await ajaxGet('data1.json'); // 执行到这里报错，直接跳至下面 catch() 语句
        let result2 = await ajaxGet(result1.url);
        let result3 = await ajaxGet(result2.url);
        console.log('result1 ---> ', result1);
        console.log('result2 ---> ', result2);
        console.log('result3 ---> ', result3);

    } catch(err) {
        console.log(err) // ReferenceError: url111 is not defined
    }
};

getDate();  // 需要执行异步函数

源码

源码查看

更多

请参考：

转载于:https://www.cnblogs.com/cckui/p/9915604.html

weixin_34055787
关注
异步Promise及Async/Await详解
qq_15859173的博客
12-21 773
一、为什么有Async/Await？ 我们都知道已经有了Promise的解决方案了，为什么还要ES7提出新的Async/Await标准呢？ 答案其实也显而易见：Promise虽然跳出了异步嵌套的怪圈，用链式表达更加清晰，但是我们也发现如果有大量的异步请求的时候，流程复杂的情况下，会发现充满了屏幕的then，看起来非常吃力，而ES7的Async/Await的出现就是为了解决这种复杂的情况。 首先，我们必须了解Promise。 二、Promise简介 2.1 Promise实例 什么是Promise，很多人应该
8张图帮你一步步看清 async/await 和 promise 的执行顺序
CSDN_KONGlX的博客
07-06 1199
需要具备的前置知识 promise的使用经验 浏览器端的eventloop 不过如果是对 ES7 的 async 不太熟悉，是没关系的哈，因为这篇文章会详解 async。 那么如果不具备这些知识呢，推荐几篇我觉得讲得比较清楚的文章 https://segmentfault.com/a/11...这是我之前写的讲解eventloop的文章，我觉得还算清晰，但是没涉及 async https...
async和await对promise异步方案的改进，以及使用注意事项
anmeiba2865的博客
10-21 298
async、await相比原生promise的有优势： 1.更加简洁,await一个promise即可,那么会自动返回这个promise的resolve值，无需在then函数的回调中手动取值，彻底解决了回调 //Promise方式 function f() { let promise = new Promise((resolve, reject) => { ...
async/await和then函数的执行顺序
weixin_41425956的博客
04-26 8248
首先说结论： async 用来指定方法为异步方法（区别于同步方法），即只有async修饰的函数中才能出现await阻塞操作，遇到阻塞是先让CPU先执行函数外的操作，之后再回函数内部执行函数内接下来的代码。而不像同步方法那样傻傻的等待，浪费CPU资源 await阻塞，后面放异步任务，当其执行完毕后，阻塞该函数的执行，去执行函数外的代码 例如：const...
ES6学习（八）---async和await
邱先生的博客
04-22 222
1.async 2.await 1.async async 函数算是一个语法糖,使异步函数、回调函数在语法上看上去更像同步函数。async函数返回一个 Promise 对象，可以使用then方法添加回调函数。当函数执行的时候，一旦遇到await就会先返回，等到异步操作完成，再接着执行函数体内后面的语句。 async function getStockPriceByName(name) { ...
async 和 await（详解）
热门推荐
前端知识库
07-04 2万+
一、async 和 await promise 使用 .then 链式调用，但也是基于回调函数 async/await 更加优雅的异步编程的写法 1.它是消灭异步回调的终极武器 2.它是同步语法，也就是用同步的写法写异步的代码 案例1：promise异步加载图片 分别使用 .then 和 await 来获取结果 区别 1.await 完全没有回调函数 2.await 是同步写法，异步操作 3.await 后面不仅仅可以接 promise对象，还可以接 async 函数 //里面函数为AJAX，因此是
ES7之Async/await的使用详解
10-17
ES6引入的Promise解决了这一问题，而ES7的Async/Await则进一步优化了Promise的使用体验，使得异步代码更接近同步的写法。 首先，我们需要了解Promise。Promise是一个代表未来某个时刻可能完成或失败的操作的对象。...
三分钟学会用ES7中的Async/Await进行异步编程
08-27
使用await时，无需像使用Promise那样链式调用.then来获取返回值，而是可以直接获取。例如： ```javascript var sleep = function(time) { return new Promise(function(resolve, reject) { setTimeout(function()...
js promise，async异步数据链式获取---回调地狱
DragonOfMoon的博客
04-12 316
回调地狱、promise、async、await
async await使用规范记录
luobo2345的博客
05-15 1172
await和then不要一起使用，await可以通过try catch捕获返回信息。
Python 笔记（21）— 协程实现、链式调用、await作用、并发任务、协程调用普通函数
wohu1104的专栏
09-08 3048
1. 什么是协程 在 Python 3.4 时候引进了协程的概念，它使用一种单线程单进程的的方式实现并发。 ​ 协程，英文名是 Coroutine， 又称为微线程，是一种用户态的轻量级线程。协程不像线程和进程那样，需要进行系统内核上的上下文切换，协程的上下文切换是由程序员决定的。在 Python 中协程就是一个可以暂停执行的函数，听起来和生成器的概念一样。 ​ 从 Python3.4 开始协程被加入到标准库，当时的协程是通过 @asyncio.coroutine 和 yeild from 实现的，看起来和生
promise，async →await，then→catch，try→catch 使用简介
weixin_44434938的博客
03-13 1198
promise，async →await，then→catch，try→catch 使用简介
JavaScript的Promise链式调用和async/await在异步处理中哪个更适用？
最新发布
SherryMacadam的博客
04-25 603
Promise和async/await是两种常用的处理异步操作的模式。其次，Promise的then方法返回的是一个新的Promise对象，这意味着每次调用then都会创建一个新的作用域，可能导致一些不易察觉的错误。其次，虽然async/await使得代码看起来像同步代码一样，但它仍然是异步的，因此需要注意避免一些常见的异步编程陷阱，如竞态条件（Race Condition）等。async/await建立在Promise的基础上，使得异步代码看起来像同步代码一样，提高了代码的可读性和可维护性。
js：Promise理解、async和await的理解、宏任务/微任务、异常处理、防抖和节流
Litt_White的博客
08-14 5321
Promise理解、async和await的理解（未完成）、构造函数/原型/原型链、防抖和节流、this指向（普通函数，箭头函数，JS/Vue的this）、上下文环境、作用域和闭包
async 和 await
weixin_41040445的博客
04-07 142
async函数就是Generator函数的语法糖 ES7中提出的async函数，它能解决Promise连续then的一个火车黑洞问题 1、基本使用 const fs = require("fs"); function readFile(url) { return new Promise((resolve,reject) => { fs.readFile(url,(err,content) => { if(err){
async/await， 搭配 promise使用
weixin_57844432的博客
11-26 4633
async/await 搭配 promise 异步
JS异步操作新体验之 async函数
笔记
09-04 983
JS异步操作新体验之 async函数 1、初识 async 函数 ES6中提供了两个很好的解决异步操作的方案 Promise 和 Generator，ES2017标准中引入的 async 函数就是建立在 Promise 和 Generator的基础之上，它是 Generator函数的语法糖，使异步操作更加方便 先通过一个异步读取文件的小栗子来对比下Promise、Generator 和 async 的异同点 const fs = require('fs') function read
async/await 和 promise 的用法
子敬的技术博客
07-02 4221
async/await 和 promise 的用法 参考：https://www.jianshu.com/p/ffa5cbe9ab29 async/await ”vs“ promise 写法： Promise主要用then函数的链式调用，一直点点点，是一种从左向右的横向写法。 async/await从上到下，顺序执行，就像写同步代码一样。这更符合人编写代码的习惯 参数数量 Promis...
理解ES7 async/await：用同步方式写异步代码
"本文主要探讨了在JavaScript中如何使用async/await来编写更清晰、更易读的异步代码，以此解决Promise链式调用可能导致的复杂性问题。文章通过一个实际的网络请求示例，展示了Promise的使用，并指出其在代码可读性上...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值