【深入学习JS】13_async/await

最新推荐文章于 2023-09-06 22:28:48 发布
最新推荐文章于 2023-09-06 22:28:48 发布
阅读量168 收藏
点赞数
分类专栏： 学习记录 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34086980/article/details/114241230
版权

async/await与Generator的相似之处

上一节了解了Generator，在最后的时候介绍了异步编程同步化的思想，其中有这么一个栗子：

function* gen(){
    var r1 = yield fetchData('https://api.github.com/users/github');
    var r2 = yield fetchData('https://api.github.com/users/github/followers');
    console.log([r1.data, r2.data].join('\n'));
}

我们再来看看如果用async/await的使用方式：

function getData(){
    let r1 = await fetchData('https://api.github.com/users/github');
    var r2 = await fetchData('https://api.github.com/users/github/followers');
    console.log([r1.data, r2.data].join('\n'));
}

有没有觉得很相似，但还是有些不同的，对于generator，我们需要手动调用next()才能将给yeild赋值。如果像上一节举的例子中，给generator搭配使用一个执行器函数，就能实现类似asycn/await的功能了。

编写执行器

  • 当Generator中使用的Promise时：
var fetch = require('node-fetch');
function* gen(){
    var r1 = yield fetch('https://api.github.com/users/github');
    var r2 = yield fetch('https://api.github.com/users/github/followers');
    var r3 = yield fetch('https://api.github.com/users/github/repos');

    console.log([r1.bio, r2[0].login, r3[0].full_name].join('\n'));
}

function run(){
    var g = gen();
    
    function next(data){
        var result = g.next(data);
        
        if(result.done)return;
        
        result.value.then(function(data){
            return data.json();
        }).then(function(data){
            next(data);
        })
    }
    
    next();
}

run(gen);
  • 当Generator中使用的回调函数时：
function fetchData(url){
    return function(cb){
        setTimeout(function(){
            cb({status: 200, data: url});
        }, 1000)
    }
}

function* gen(){
    var r1 = yield fetchData('https://api.github.com/users/github');
    var r2 = yield fetchData('https://api.github.com/users/github/followers');

    console.log([r1.data, r2.data].join('\n'));
}

function run(gen){
    var g = gen();
    
    function next(data){
        var result = g.next(data);
        
        if(result.done)return;
        
        result.value(next);
    }
    
    next();
}

run(gen);
  • 两种写法进行合并，适用于Generator为Promise或者回调函数的情况：
function run(gen){
    var g = gen();
    
    function next(data){
        var result = gen.next(data);
        if(result.done) return;
        
        if(isPromise(result.value)){
            result.value.then(function(data){
                next(data);
            })
        }else {
            result.value(next);
        }
    }
    
    next();
}

function isPromise(obj){
    return 'function' === typeof obj.then;
}

module.exports = run;
  • 让启动器返回一个Promise，便于获得Generator函数的返回值，或者捕获错误：
function run(gen){
    var g = gen();
    
    return new Promise(function(resolve, reject){
        function next(data){
            try {
                var result = gen.next(data);
            } catch(e){
                return reject(e);
            }

            if(result.done){
                return resolve(result.value);
            }
            
            var value = toPromise(result.value);
            
            value.then(function(data){
                next(data);
            }, function(e){
                reject(e);
            })
        }

        next();
    })
}

function isPromise(obj){
    return 'function' === typeof obj.then;
}

function toPromise(obj){
    if(isPromise(obj)) return obj;
    if('functon' === typeof obj) return thunkToPromise(obj);
    return obj;
}

function thunkPromise(fn){
    return new Promise(function(resolve, reject){
        fn
    })
}

module.exports = run;
  • 优化代码：
function run(gen){
    return new Promise(function(resolve, reject){
        if(typeof gen == 'function') gen = gen();
        
        if(!gen || typeof gen.next !== 'function') return resolve(gen);
        
        onFulfilled();
        
        function onFulfilled(res){
            var r;
            try{
                r = gen.next(res);
            } catch(e){
                return reject(e);
            }
            next(r);
        }
        
        function onRejected(err){
            var r;
            try{
                r = gen.throw(err);
            }catch(e){
                return reject(e);
            }
            next(r);
        }
        
        function next(r){
            if(r.done) return resolve(r.value);
            var value = toPromise(r.value);
            if(value && isPromise(value)) return value.then(onFulfilled, onRejected);
            return onRejected(new TypeError('You may only yield a function, promise ' +
                'but the following object was passed: "' + String(r.value) + '"'))
        }
    })
}

function isPromise(obj) {
    return 'function' == typeof obj.then;
}

function toPromise(obj) {
    if (isPromise(obj)) return obj;
    if ('function' == typeof obj) return thunkToPromise(obj);
    return obj;
}

function thunkToPromise(fn) {
    return new Promise(function(resolve, reject) {
        fn(function(err, res) {
            if (err) return reject(err);
            resolve(res);
        });
    });
}

module.exports = run;

执行器的实现大致就是这样了。

Co

每次执行 generator 函数时自己写启动器比较麻烦。co函数库 是一个 generator 函数的自启动执行器，使用条件是 generator 函数的 yield 命令后面，只能是 thunk 函数或 Promise 对象，co 函数执行完返回一个 Promise 对象。

如果我们再将这个启动器函数写的完善一些，我们就相当于写了一个 co，实际上，上面的代码确实是来自于 co……

如果直接使用 co 模块，这两种不同的例子可以简写为：

// yield 后是一个 Promise
var fetch = require('node-fetch');
var co = require('co');

function* gen() {
    var r1 = yield fetch('https://api.github.com/users/github');
    var json1 = yield r1.json();
    var r2 = yield fetch('https://api.github.com/users/github/followers');
    var json2 = yield r2.json();
    var r3 = yield fetch('https://api.github.com/users/github/repos');
    var json3 = yield r3.json();

    console.log([json1.bio, json2[0].login, json3[0].full_name].join('\n'));
}

co(gen);

// yield 后是一个回调函数
var co = require('co');

function fetchData(url) {
    return function(cb) {
        setTimeout(function() {
            cb(null, { status: 200, data: url })
        }, 1000)
    }
}

function* gen() {
    var r1 = yield fetchData('https://api.github.com/users/github');
    var r2 = yield fetchData('https://api.github.com/users/github/followers');

    console.log([r1.data, r2.data].join('\n'));
}

co(gen);

async/await 的实现原理

async、await是co库的官方实现。也可以看作自带启动器的generator函数的语法糖。也可以理解为async函数是基于 Promise 和 Generator 的一层封装。

// 使用 generator
var fetch = require('node-fetch');
var co = require('co');

function* gen() {
    var r1 = yield fetch('https://api.github.com/users/github');
    var json1 = yield r1.json();
    console.log(json1.bio);
}

co(gen);

// 使用 async
var fetch = require('node-fetch');

var fetchData = async function () {
    var r1 = await fetch('https://api.github.com/users/github');
    var json1 = await r1.json();
    console.log(json1.bio);
};

fetchData();

优雅使用async/await

async地狱

// bad
// 两个毫无关系的数据请求由于使用了async/await，
// 导致getAnotherList必须在getList才能请求，影响了请求时间
async function test(){
    const listData = await getList();
    const anotherListData = await getAnotherList();
}

// good
async function test(){
    const listPromise = getList();
    const anotherListPromise = getAnotherList();
    await listPromise;
    await anotherListPromise;
}

// good
async function test(){
    Promise.all([getList(), getAnotherList()]).then(...);
}

错误捕获

// bad
// 给每个async/await使用try catch捕获错误，会导致代码杂乱
async function test(cb){
    try {
        const listData = await getList();
        if(!listData) return return cb('No listData found');
    }catch(e){
        return cb('Unexpected error occurred');
    }

    try {
        const anotherListData = await getAnotherList();
        if(!listData) return return cb('No anotherListData found');
    }catch(e){
        return cb('Unexpected error occurred');
    }
}

// good

// 封装一个to函数
export default function to(promise){
    return promise.then(data => {
        return [null, data];
    }).catch(err => [err]);
}

import to from './to.js';
async function test(cb){
    let err, listData, anotherListData;
    
    [err, listData] = await to(getList);
    if(!listData) throw new CustomerError('No listData found');

    [err, anotherListData] = await to(getAnotherList);
    if(!anotherListData) throw new CustomerError('No getAnotherList found');
}

总结

  • async/await本质是generator的语法糖，可以借助generator和promise实现；
  • 每次给generator编写执行器太麻烦时可以使用co，async/await是co库的官方实现；
  • async/await虽然可以将异步编程同步化，但是有时候顺序执行会影响请求速度，所以应该慎重。

我有一种我明天就会忘得差不多的感觉，好难啊。

参考

若有错误，欢迎指出，感谢~

Armouy
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
理解async和await
awn80645的博客
01-14 698
async 是“异步”的简写，而 await 可以认为是 async wait 的简写。 所以应该很好理解 async 用于申明一个 function 是异步的，而 await 用于等待一个异步方法执行完成。 async 函数是什么？一句话，它就是 Generator 函数的语法糖。async函数就是将 Generator 函数的星号（*）替换成async，将yield替换成a...
深入理解JavaScript的async/await
10-18
我们给大家分享了关于JavaScript的async/await的相关知识点内容，有需要的朋友们可以学习下。
JS异步函数async和await
qq_45707021的博客
06-29 1630
用于声明异步函数它以类似同步的方式来写异步方法，语法与声明函数类似： 他的调用与函数相同： 的返回结果是一个对象，如果 的值是除 以外的任何值，都算是成功的，都会调用 方法，所以他的输出结果为： 如果返回的值是 或者错误，都会调用 方法： 或者 结果为： 与 要获取 函数的返回结果，就需要用到 的 或 来获取 获取成功的结果： 结果： 获取失败的结果： 结果： 如果函数调用时注册了回调函数，那么注册的回调函数就会被放到中，主线程会先执行下面的代码，再回来执行函数： 结果： 不注册回调
js中async和await的使用理解
前端报刊
06-12 934
一、在讲解async和await之前，我们先去创建三个普通的函数，如下： <template> </template> <script> export default { created() { function funOne() { return '111111' } function funTwo(){ return '222222' } function funThree(){ return '333
ES6-ES13
最新发布
这个人很懒~
09-06 248
注意：添加值时是通过变量的形式，删除的也是变量，则无法回收内存，需要添加节点本身或变量所引用值得本身，不能通过变量传入，删除变量的方式，导致代码量大。发送多个请求，第二个请求需要第一个请求的结果中的某一个值作为参数，第三个则需要第二个，...，嵌套结构的增多，导致代码横向发展（不健康），不方便阅读和维护。用于拦截某个属性的读取操作，可以接受三个参数，依次为目标对象、属性名和 proxy 实例本身【操作行为所针对的对象，经过Proxy化的原对象，可选】内置执行器完全自动化，更好的语义、更广的适用性。
彻底搞懂 async await 的return问题
热门推荐
韩旭的博客
05-28 4万+
什么是async await？ 简单的来说 async await就是promise的语法糖，我们可以把它认知为promise的简写，另外你可以将它简单的认为是异步转同步的那么一个解决方案。 Async？ 首先我们来看这一串代码 //立即执行函数，不了解的话可以去查一下资料 const a = (async () => { return 111 })() console.log(a) // Promise { 111 } 我们可以看到给函数添加上async之后 返回值即成为了promise对象，
js代码-Promise & async/await
07-16
为了深入理解Promise和async/await，建议查看这两个文件的内容，结合实际应用进行学习。 总之，Promise和async/await是现代JavaScript中不可或缺的部分，它们帮助我们编写更清晰、更易于理解和维护的异步代码。通过...
JavaScript.rar_JavaScript/JQuery_JavaScript_
08-11
JavaScript，也被称为JS，是一种广泛应用于网页和网络应用的轻量级、解释型编程语言，尤其在客户端开发中占据核心地位。它与HTML和CSS一起，构成了网页开发的三驾马车，使得网页具备动态交互功能。JavaScript语法...
javascript-advance.rar_JavaScript/JQuery_JavaScript_
08-11
2. 原型链与继承：JavaScript采用原型链实现继承，理解对象的原型和`__proto__`属性，以及`Object.create()`方法对于深入学习至关重要。 3. 模块化：CommonJS、AMD、ES6模块等是JavaScript中的模块化解决方案，理解...
js代码-async-await实现原理
07-14
在JavaScript中，`async/await`是异步编程的一种优雅解决方案，它使得复杂的回调函数链路变得更加简洁和易于理解。`async/await`基于Promise，是Promise语法的补充，为处理异步操作提供了同步风格的写法。让我们深入...
JS中的async/await的用法和理解
刘泽海的博客
09-18 2万+
1、首先需要理解async 和 await的基本含义 async 是一个修饰符，async 定义的函数会默认的返回一个Promise对象resolve的值，因此对async函数可以直接进行then操作,返回的值即为then方法的传入函数 // 0. async基础用法测试 async function fun0() { console.log(1) return 1 } fun0().then( x => { console.log(x) }) // 输出结果 1，..
JS中async、await的基本使用
挚友阳光的博客
03-18 791
ES6 async、await的基本使用方法。分享给大家供大家参考，具体如下： async是异步编程的最新标准，我们来看看async如何使用 1.async的简单使用 javascript async function fn () { return 'abc' } console.log(fn()); // Promise { 'abc' } fn().then(res => { console.log(res); //
js的co.js源码解析
标子 的专栏
07-16 2210
co的主要思想是利用把每个yield后面的值转成一个Promise对象，然后给该Promise对应注册fulfilled和rejected两个回调，在这两个回调里会执行next函数，进行下一步迭代，也就是执行下一个yield，从而不断地向前驱动迭代器，直到执行完毕或者出错。 co的好处： var content = yield readSomethingAsync(); console
JSasync和await详解
MrWangJB的博客
08-08 1万+
1. async 和 await 在干什么 任意一个名称都是有意义的，先从字面意思来理解。async 是“异步”的简写，而 await 可以认为是 async wait 的简写。所以应该很好理解 async 用于申明一个 function 是异步的，而 await 用于等待一个异步方法执行完成。 另外还有一个很有意思的语法规定，await 只能出现在 async 函数中。然后细心的朋友会产生一个疑问，如果 await 只能出现在 async 函数中，那这个 async 函数应该怎么调用？ 如果需要通过 aw
async function_js中async和await的基本使用
weixin_39639568的博客
12-01 896
async和await是在es7中的内容，不过现在主流浏览器都支持，今天我们就来说说怎么用。首先你得先了解：es6中的promise,请自行了解，此篇文章不谈。async和await是用来处理异步操作的，把异步变为同步的一种方法。async声明一个function来表示这个异步函数，await用于等待函数中某个异步操作执行完成。async返回的是一个promise对象，返回值可在promise中的...
关于JavaScript 的 async/await
程序猿开发日志【学习永无止境】
03-10 8783
随着 Node 7 的发布，越来越多的人开始研究据说是异步编程终级解决方案的 async/await。我第一次看到这组关键字并不是在 JavaScript 语言里，而是在 c# 5.0 的语法中。C# 的 async/await 需要在 .NET Framework 4.5 以上的版本中使用，因此我还很悲伤了一阵——为了要兼容 XP 系统，我们开发的软件不能使用高于 4.0 版本的 .NET Fr
JS13-严格模式
DcTbnk的博客
03-23 206
1
Async---Await原理
jinglianglove的博客
12-25 595
Async—Await原理 async、await 优缺点: async 和 await 相比直接使用 Promise 来说，优势在于处理 then 的调用链，能够更清晰准确的写出代码。 缺点在于滥用 await 可能会导致性能问题， 因为 await 会阻塞代码，也许之后的异步代码并不依赖于前者，但仍然需要等待前者完成，导致代码失去了并发性。 链接：https://juejin.im/post...
【小程序实战系列】电商平台源码及功能实现
半身风雪
06-27 5079
零售行业模版小程序是个经典的单店版电商小程序，涵盖了电商的黄金链路流程，从商品->购物车->结算->订单等。小程序总共包含 28 个完整的页面，涵盖首页，商品详情页，个人中心，售后流程等基础页面。采用 mock 数据进行展示，提供了完整的零售商品展示、交易与售后流程。页面详情：主要页面截图如下： 零售行业模版小程序采用基础的 JavaScript + WXSS + ESLint 进行构建，降低了使用门槛。项目目录结构如下： 三、
深入解析：O'Reilly《You Don't Know JS: Async & Performance》
《You Don't Know JS: Async & Performance》是一本由O'Reilly出版社出版的深入讲解JavaScript异步编程与性能优化的专业书籍。这本书专为有一定JavaScript基础的开发者设计，旨在帮助读者理解和掌握现代JavaScript中...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值