首页 / JAVASCRIPT / JS异步编程之Promise、Generator、async/await

JS异步编程之Promise、Generator、async/await

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了JS异步编程之Promise、Generator、async/await，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含7496字，纯文字阅读大概需要11分钟。

内容图文

这篇文章主要介绍了关于JS异步编程之Promise、Generator、async/await ，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下

JS异步编程 (2) - Promise、Generator、async/await

上篇文章我们讲了下JS异步编程的相关知识，比如什么是异步，为什么要使用异步编程以及在浏览器中JS如何实现异步的。
最后我们捎带讲了几种JS异步编程模式（回调，事件和发布/订阅模式），这篇我们继续去深入了解下其他的几种异步编程模式。

Promise

Promise是ES6推出的一种异步编程的解决方案。其实在ES6之前，很多异步的工具库就已经实现了各种类似的解决方案，而ES6将其写进了语言标准，统一了用法。Promise解决了回调等解决方案嵌套的问题并且使代码更加易读，有种在写同步方法的既视感。

我们先来简单了解下ES6中Promise的用法

var p = new Promise(function async(resolve, reject){    // 这里是你的异步操作
    setTimeout(function(){        if(true){
            resolve(val);
        }else{
            reject(error);
        }
    }, 1000)
})

p.then(function(val){    console.log('resolve');
}, function(){    console.log('reject');
})

首先，ES6规定Promise是个构造函数，其接受一个函数作为参数如上面代码中的async函数，此函数有两个参数，resolve、reject分别对应成功失败两种状态，我们可以选择在不同时候执行resolve或者reject去触发下一个动作，执行then方法里的函数。

我们可以简单对比下回调的写法和promise的写法的不同

对于传统回调写法来说，一般会写成这样

asyncFn1(function () {
  asyncFn2(function() {
    asyncFn3(function() {        // xxxxx
    });
  });
});

或者我们将各个回调函数拆出来独立来写以减少耦合，像是这样：

function asyncFn1(callback) {    return function() {        console.log('asyncFn1 run');
        setTimeout(function(){
            callback();
        }, 1000);
    }
}function asyncFn2(callback) {    return function(){        console.log('asyncFn2 run');
        setTimeout(function(){
            callback();
        }, 1000);
    }
}function normalFn3() {    console.log('normalFn3 run');
}

asyncFn1(asyncFn2(normalFn3))()

最后我们看下Promise的写法

function asyncFn1() {    
console.log('asyncFn1 run');    
return new Promise(function(resolve, reject) {
        setTimeout(function(){
            resolve();
        }, 1000)
    })
}function asyncFn2() {    
console.log('asyncFn2 run');    
return new Promise(function(resolve, reject) {
        setTimeout(function(){
            resolve();
        }, 1000)
    })
}function normalFn3() {    console.log('normalFn3 run');
}

asyncFn1().then(asyncFn2).then(normalFn3);

这样来看无论是第一种还是第二种写法，都会让人感到不是很直观，而Promise的写法更加直观和语义化。

Generator

Generator函数也是ES6提供的一种特殊的函数，其语法行为与传统函数完全不同。

我们先直观看个Generator实际的用法

function* oneGenerator() {  
yield 'Learn';  
yield 'In';  
return 'Pro';
}var g = oneGenerator();

g.next();   // {value: "Learn", done: false}g.next();   // {value: "In", done: false}g.next();   // {value: "Pro", done: true}

Generator函数是一种特殊的函数，他有这么几个特点：

声明时需要在function后面加上*，并且配合函数里面yield关键字来使用。
在执行Generator函数的时候，其会返回一个Iterator遍历器对象，通过其next方法，将Generator函数体内的代码以yield为界分步执行
具体来说当执行Generator函数时，函数并不会执行，而是需要调用Iterator遍历器对象的next方法，这时程序才会执行从头或者上一个yield之后 到 到下一个yield或者return或者函数体尾部之间的代码，并且将yield后面的值，包装成json对象返回。就像上面的例子中的{value: xxx, done: xxx}。
value取的yield或者return后面的值，否则就是undefined，done的值如果碰到return或者执行完成则返回true，否则返回false。

我们知道了简单的Generator函数的用法以后，我们来看下如何使用Generator函数进行异步编程。

首先我们先来看下使用Generator函数能达到怎样的效果。

// 使用Generator函数进行异步编程function* oneGenerator() {  yield asyncFn1();  yield asyncFn2();  yield normalFn3();
}// 我们来对比一下PromiseasyncFn1().then(asyncFn2).then(normalFn3);

我们可以看出使用Generator函数进行异步编程更像是在写同步任务，对比Promise少了很多次then方法的调用。

好，那么接下来我们就来看下如何实际使用Generator函数进行异步编程。

这里我要特别说明一下，事实上Generator函数不像Promise一样是专门用来解决异步处理而产生的，人们只是使用其特性来产出了一套异步的解决方案，所以使用Generator并不像使用Promise一样有一种开箱即用的感觉。其更像是在Promise或者回调这类的解决方案之上又封装了一层，让你可以像上面例子里一样去那么写。

我们还是具体来看下上面的例子，我们知道单写一个Generator是不能运行的对吧，我们需要执行他并且使用next方法来让他分步执行，那么什么时候去调用next呢？答案就是我们需要在异步完成时去调用next。我们来按照这个思路补全上面的例子。

var g;function asyncFn() {
    setTimeout(function(){
        g.next();
    }, 1000)
}function normalFn() {    console.log('normalFn run');
}function* oneGenerator() {  yield asyncFn();  return normalFn();
}

g = oneGenerator();

g.next();// 这里在我调用next方法的时候执行了asyncFn函数// 然后我们的希望是在异步完成时自动去再调用g.next()来进行下面的操作，所以我们必须在上面asyncFn函数体内的写上g.next(); 这样才能正常运行。// 但其实这样是比较奇怪的，因为当我定义asyncFn的时候其实是不知道oneGenerator执行后叫什么名儿的，即使我们提前约定叫g，但这样asyncFn就太过于耦合了，不仅写法很奇怪而且耦合太大不利于扩展和重用。反正总而言之这种写法很不好。

那么怎么解决呢，我们需要自己写个方法，能自动运行Generator函数，这种方法很简单在社区里有很多，最著名的就是大神TJ写的co模块，有兴趣的同学可以看下其源码实现。这里我们简单造个轮子：

// 如果我们想要去在异步执行完成时自动调用next就需要有一个钩子，回调函数的callback或者Promise的then。function autoGenerator(generator){  var g = generator();  function next(){    var res = g.next();  // {value: xxx, done: xxx}

    if (res.done) {        return res.value;
    }    if(typeof res.value === 'function'){    // 认为是回调
        res.value(next);
    }else if(typeof res.value === 'object' && typeof res.value.then === 'function'){     // 认为是promise
        res.value.then(function(){
            next();
        })
    }else{
        next();
    }
  }

  next();
}// ----function asyncFn1(){    console.log('asyncFn1');    return new Promise(function(resolve){
        setTimeout(function(){
            resolve();
        }, 1000)
    })
}function asyncFn2() {    console.log('asyncFn2');    return function(callback){
        setTimeout(function(){
            callback();
        }, 1000);
    }
}function normalFn() {    console.log('normalFn');
}function* oneGenerator() {  yield asyncFn1();  yield asyncFn2();  yield normalFn();
}

autoGenerator(oneGenerator);

这个方法我们简单实现了最核心的部分，有些判断可能并不严谨，但大家理解这个思路就可以了。有了这个方法，我们才可以方便的使用Generator函数进行异步编程。

Async/Await

如果你学会了Generator函数，对于Async函数就会很容易上手。你可以简单把Async函数理解成就是Generator函数+执行器。我们就直接上实例好了

function asyncFn1(){    console.log('asyncFn1');    return new Promise(function(resolve){
        setTimeout(function(){
            resolve('123');
        }, 2000)
    })
}function asyncFn2() {    console.log('asyncFn2');    return new Promise(function(resolve){
        setTimeout(function(){
            resolve('456');
        }, 2000)
    })
}

async function asyncFn () {    var a = await asyncFn1();    var b = await asyncFn2();    console.log(a,b)
}

asyncFn();// asyncFn1// asyncFn2// 123，456

当然async里实现的执行器肯定是跟咱们上面简单实现的有所不同，所以在用法上也会有些注意的点

首先async函数的返回值是一个Promise对象，不像是generator函数返回的是Iterator遍历器对象，所以async函数执行后可以继续使用then等方法来继续进行下面的逻辑
await后面一般跟Promise对象，async函数执行时，遇到await后，等待后面的Promise对象的状态从pending变成resolve的后，将resolve的参数返回并自动往下执行直到下一个await或者结束
await后面也可以跟一个async函数进行嵌套使用。

对于异步来说，还有很多的知识点我们没有讲到，比如异常处理，多异步并行执行等等，这篇和上篇文章主要还是希望大家对异步编程有个直观的了解，清楚各种解决方案之间的区别和优劣。由于篇幅和精力有限，对于其他我们没讲到的知识点，如果大家有兴趣有机会我会再写文章深入讲解的。

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

内容总结

以上是互联网集市为您收集整理的JS异步编程之Promise、Generator、async/await全部内容，希望文章能够帮你解决JS异步编程之Promise、Generator、async/await所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/285893.html

来源：【匿名】

【上一篇】js执行上下文变量、函数、this 【下一篇】javascript 怎么调用php方法

更多 ►

【JS异步编程之Promise、Generator、async/await】教程文章相关的互联网学习教程文章

JavaScript 的 Async\/Await 完胜 Promise 的六【代码】

参考：http://www.10tiao.com/html/558/201705/2650964601/1.htmlNode 现在从版本 7.6 开始就支持 async/await 了。简介：Async/await 是一种编写异步代码的新方法。之前异步代码的方案是回调和 promise。Async/await 实际上是建立在 promise 的基础上。它不能与普通回调或者 node 回调一起用。Async/await 像 promise 一样，也是非阻塞的。Async/await 让异步代码看起来、表现起来更像同步代码。这正是其威力所在。语法：假设函...

JavaScript及其异步实现续:Promise让一切更简单【图】

在写这篇文章之前，我参考了以下文章。所以我文中的例子都是精准的，而且有循可依。下面抛出例子的链接： Understanding JQuery.Deferred and PromiseDeferred and promise in jQueryEdit:在翻网站的时候，看到腾讯技术团队居然也刚写了一篇Promise的文章，加下链接，以作备忘。JavaScript Promise启示录Deferred在JQuery1.5的版本被引进，这项功能的引进使JQuery变得更加强大，良好的异步支持，让书写异步JS变得简单轻松，而且...

Javascript的事件模型和Promise实现【代码】

1. Javascript的运行时模型——事件循环 JS的运行时是个单线程的运行时，它不像其他编程语言，比如C++，Java，C#这些可以进行多线程操作的语言。当它执行一个函数时，它只会一条路走到黑，不会在当前函数结束之前去调用其他的函数（除非当前函数主动调用其他函数）。它也不用担心会有其他线程打扰它，因为它的运行时只有一个线程。如果你还记得一些计算机原理的话，这种运行时只有一个栈，设计起来相当的简单。一条路走到黑的设计很...

javaScript Promise 入门【代码】【图】

Promise是JavaScript的异步编程模式，为繁重的异步回调带来了福音。一直以来,JavaScript处理异步都是以callback的方式，假设需要进行一个异步队列，执行起来如下：animate (ball1, 100, function () {animate (ball2, 200, function () {animate (ball3, 300, function () {animate (ball3, 150, function () {animate (ball2, 150, function () {animate (ball1, 150, function () {// do something})})})})})这就是所谓的回调金字...

你不知道的JavaScript--Item34 大白话讲解Promise【代码】【图】

去年6月份， ES2015正式发布（也就是ES6，ES6是它的乳名），其中Promise被列为正式规范。作为ES6中最重要的特性之一，我们有必要掌握并理解透彻。本文将由浅到深，讲解Promise的基本概念与使用方法。ES6 Promise 先拉出来遛遛一、Promise小试复杂的概念先不讲，我们先简单粗暴地把Promise用一下，有个直观感受。那么第一个问题来了，Promise是什么玩意呢？是一个类？对象？数组？函数？别猜了，直接打印出来看看吧，console.dir(Pr...

Javascript Promises 介绍【代码】【图】

什么是 PromisesPromises是一种关于异步编程的规范，目的是将异步处理对象和处理规则进行规范化，为异步编程提供统一接口。传统的回调函数说到JavaScript的异步编程处理，通常我们会想到回调函数，如下面的代码：getFileAsync("1.txt", function(error, result){if(error){throw error;}// 取得成功时的处理 });上面的代码定义了一个获取文件内容的函数，读取完成后回调用传入的回调函数，对于下面的场景：－读取文件 1.tx...

js-20170830-Promise对象

1. 简介Promise 对象是 CommonJS 工作组提出的一种规范，目的是为异步操作提供统一接口.首先，它是一个对象，其次，它起到代理作用（proxy），充当异步操作与回调函数之间的中介。简单说，它的思想是，每一个异步任务立刻返回一个Promise对象，由于是立刻返回，所以可以采用同步操作的流程。这个Promises对象有一个then方法，允许指定回调函数，在异步任务完成后调用。 2. Promise接口Promise对象只有三种状态。异步操作“未完成”...

JS 异步系列 —— Promise 札记【代码】

Promise研究 Promise 的动机大体有以下几点：对其 api 的不熟悉以及对实现机制的好奇;很多库(比如 fetch)是基于 Promise 封装的，那么要了解这些库的前置条件得先熟悉 Promise;要了解其它更为高级的异步操作得先熟悉 Promise;基于这些目的，实践了一个符合 Promise/A+ 规范的 repromise。本札记系列总共三篇文章，作为之前的文章 Node.js 异步异闻录的拆分和矫正。Promise札记Generator札记Async札记Promise/A+ 核心在实现一个符合...

浅谈JavaScript中的对象及Promise对象的实现【代码】

JavaScript 中的所有事物都是对象：字符串、数值、数组、函数。下面小编给大家收集整理些javascript中的对象及promise对象的实现。具体内容如下：到处都是对象window对象常用的属性和方法介绍location　　包含页面的URL，如果改变这个属性，浏览器会访问新的URLstatus　　包含将在浏览器状态去显示的一个串。一般在浏览器左下角onload：　　包含了需要在页面完全加载后调用的函数document：　　包含DOMalert方法：　　显示一个提醒...

js使用Promise实现简单的Ajax缓存

业务场景在不少业务场景下，我们需要实现简单的请求缓存(即某个请求只发起一次请求)，例如上传 Token 的获取、获取配置的接口等。这些接口可以通过 Promise 实现简单的缓存并能够控制更新，而不需要另外引入缓存层。示范代码用七牛上传作例子，一般我们会把七牛上传封装为一个单独的 Upload 组件，外部只需要调用组件，而 token 的获取封装到组件内部实现。 //Upload.vue let fetchToken = null; export default {data() {return...

javascript-Request-Promise：不要承诺缓存结果【代码】

我正在使用Request-Promise(请参见下面的代码). 问题：如果我缓存了一个诺言,它会缓存结果还是每次都问一个新的诺言？例：var cachedPromise = getTokenPromise(); cachedPromise.then(function(authorizationToken1) {//... }); cachedPromise.then(function(authorizationToken2) {//... }); //QUESTION: Is right that authorizationToken1 equals authorizationToken2getTokenPromise()函数：var querystring = require('quer...

利用Promise自定义一个GET请求的函数示例代码

写在最前面近期 review 自己以前的代码的时候，看到 promise 的使用方法，用的比较模糊。含义不清，用法凌乱，这里重新温习一下基础知识。前言 JavaScript 是单线程工作，但是浏览器是多线程的。为了更好的完成我们程序的任务。Promise 异步的操作就由此诞生了。一个 Promise 就是一个代表了异步操作最终完成或者失败的结果对象。怎么使用？语法基本 new Promise( function(resolve, reject) {...} /* executor */ );Promise 构...

javascript – 在promise解析后修改组件状态【代码】

我希望在解析promise之后修改组件的状态(本机反应). 这是我的代码：class Greeting extends Component{constructor(props){super(props);this.state = {text: 'Starting...'};var handler = new RequestHandler();handler.login('email','password').then(function(resp){this.setState({text:resp});});}render(){return (<Text style={this.props.style}>Resp: {this.state.text}</Text>);} }但是当promise解决时,它会抛出以下错...

js利用递归与promise 按顺序请求数据的方法【图】

问题：项目中有一个需求，一个tabBar下面如果没有内容就不让该tabBar显示，当然至于有没有内容，需要我们通过请求的来判断，但是由于请求是异步的，如何让请求按照tabBar的顺序进行？方案：我们可以将promise变成下一个请求，可以利用递归来实现实施： //定义初始数据 requestlist就像tabBar列表let requestlist = [1, 2, 3, 4, 5, 6, 7,8,9];//每个tabBar的返回数据使用reslist装起来let reslist = [];function startapi() {//定...

NodeJS中利用Promise来封装异步函数

在写Node.js的过程中，连续的IO操作可能会导致“金字塔噩梦”，回调函数的多重嵌套让代码变的难以维护，利用CommonJs的Promise来封装异步函数，使用统一的链式API来摆脱多重回调的噩梦。Node.js提供的非阻塞IO模型允许我们利用回调函数的方式处理IO操作，但是当需要连续的IO操作时，你的回调函数会多重嵌套，代码很不美观，而且不易维护，而且可能会有许多错误处理的重复代码，也就是所谓的“Pyramid of Doom”。代码如下: step1(f...

首页 / JAVASCRIPT / JS异步编程之Promise、Generator、async/await

JS异步编程之Promise、Generator、async/await

内容导读

内容图文

Promise

Generator

Async/Await

内容总结

内容备注

内容手机端

【JS异步编程之Promise、Generator、async/await】教程文章相关的互联网学习教程文章

PROMISE - 相关标签

JAVASCRIPT - 技术教程分类

JAVASCRIPT - 最新教程

JAVASCRIPT - 最热教程