javascript异步解决方案

文章目录

  • 1. 解决方案之回调函数
    • 1.2 回调函数可以解决异步问题
  • 2. 解决方案之promise的使用
    • 2.1 promise的定义
    • 2.2 promise 的规范
      • 2.2.1 四大术语
      • 2.2.2 3种状态
      • 2.2.3 2种事件
      • 2.2.4 1个对象
    • 2.3 promise的基本用法
      • 2.3.1 基本用法
      • 2.3.2 then 方法
      • 2.3.3promise典型定义
        • 2.3.3.1 案例1:读取文件操作
        • 2.3.3.2 案例2:根据随机数返回结果
        • 2.3.3.3 读取文件封装
      • 2.3.4 all和race方法
    • 2.4 使用第三方的Promise库
  • 3. 解决方案之generator 与 co
    • 3.1 Generator的出现
    • 3.2 Generator的使用
    • 3.3 Generator的执行方式
    • 3.4 generator和Promise、co配合使用
  • 4. 解决方案之async 与 await
    • 4.1 async关键字
    • 4.2 await关键字
    • 4.3 简单的使用案例:

js异步解决的发展历程:

回调函数----->peomise------>generator + co----->async + await

1. 解决方案之回调函数

回调函数可以解决存在的异步问题,但回调函数分为,同步与异步:
javascript异步解决方案_第1张图片

1.2 回调函数可以解决异步问题

callback
javascript异步解决方案_第2张图片

回调函数本身是我们约定俗成的一种叫法,我们定义它,但是并不会自己去执行它,它最终被其他人执行了。

优点:比较容易理解;
缺点:1.高耦合,维护困难,回调地狱;2.每个任务只能指定一个回调函数;3.如果几个异步操>作之间并没有顺序之分,同样也要等待上一个操作执行结束再进行下一个操作。

下图回调地狱
javascript异步解决方案_第3张图片

2. 解决方案之promise的使用

2.1 promise的定义

Promise 是异步编程的一种解决方案,比传统的解决方案——回调函数和事件——更合理和更强大。

参考

  • Promisr A+使用规范

理解:

  • 没有异步就不需要promise。
  • Promise本身不是异步,只是我们去编写异步代码的一种方式

2.2 promise 的规范

Es6将promise纳入自己规范的时候,也遵循了一个相应的标准 — ==Promise A+规范。

将其归纳为4321规范

4:4大术语
3:3种状态
2:2种事件
1:1个对象

2.2.1 四大术语

  1. 解决(fulfill):指一个 promise 成功时进行的一系列操作,如状态的改变、回调的执行。虽然规范中用 fulfill 来表示解决,但在后世的 promise 实现多以 resolve 来指代之。

  2. 拒绝(reject):指一个 promise 失败时进行的一系列操作。

  3. 终值(eventual value):所谓终值,指的是 promise 被解决时传递给解决回调的值,由于 promise 有一次性的特征,因此当这个值被传递时,标志着 promise 等待态的结束,故称之终值,有时也直接简称为值(value)。

  4. 据因(reason):也就是拒绝原因,指在 promise 被拒绝时传递给拒绝回调的值。

2.2.2 3种状态

  • 等待态(Pending)
  • 执行态(Fulfilled)
  • 拒绝态(Rejected)

javascript异步解决方案_第4张图片

针对每种状态的规范
等待态(Pending)
处于等待态时,promise 需满足以下条件:

  • 可以迁移至执行态或拒绝态

执行态(Fulfilled)

处于执行态时,promise 需满足以下条件:

  • 不能迁移至其他任何状态
  • 必须拥有一个不可变的终值

拒绝态(Rejected)

处于拒绝态时,promise 需满足以下条件:

  • 不能迁移至其他任何状态
  • 必须拥有一个不可变的据因

2.2.3 2种事件

针对3种状态,只有如下两种转换方向:

  • pending –> fulfilled
  • pendeing –> rejected

在状态转换的时候,就会触发事件。

如果是pending –> fulfiied,就会触发onFulFilled事件
如果是pendeing –> rejected,就会触发onRejected事件

2.2.4 1个对象

就是指promise对象

2.3 promise的基本用法

2.3.1 基本用法

let p = new Promise(function (resolve,reject) {
            reject("no");
        })
        console.log('p :', p);

回调函数中的两个参数,其作用就是用于转换状态:

resolve,将状态从pending –> fullFilled
reject,将状态从pending –> rejected

2.3.2 then 方法

在状态转换的时候,就会触发事件

如果是pending –> fulfiied,就会触发onFulFilled事件

如果是pendeing –> rejected,就会触发onRejected事件

针对事件的注册,Promise对象提供了then方法,如下:

enter description here

2.3.3promise典型定义

2.3.3.1 案例1:读取文件操作

const fs = require("fs");

let p = new Promise(function (resolve,reject) {
    fs.readFile("03-js基础/a.txt","utf8",(err,date)=>{
        if(err){
            reject(err);
        }else{
            resolve(date);
        }
    });
  });
  
  p.then(result=>{
      console.log('result :', result);
  }).catch(err=>{
      console.log('err :', err);
  });

2.3.3.2 案例2:根据随机数返回结果

let p = new Promise((resolve,reject)=>{
    setTimeout(()=>{
        let num = Math.random();
        if(num>0.5){
            resolve("success");
        }else{
            reject("fail");
        }
    },1000);
});

p.then(result=>{
    console.log('result :', result);
},err=>{
    console.log('err :', err);
})

2.3.3.3 读取文件封装

const fs = require("fs");

function readFile(file){
    return new Promise((resolve,reject)=>{
        fs.readFile("file","utf8",(err,date)=>{
            if(err){
                reject(err);
            }else{
                resolve(date);
            }
        });
    });
}

readFile("a.txt").then(result=>{
    console.log('result :', result);
},err=>{
    console.log('err :', err);
})

2.3.4 all和race方法

all:所有,全部执行,并且满足要求
race:竞赛,谁跑的快,执行谁的(不分成功与失败)

all和race都是Promise构造器对象的静态方法。直接使用Promise调用,如下:

  • Promise.all()
  • Promise.reace()
    • 返回值都是promise对象。

当有多个异步操作的时候,经常会有如下两种需求:(有点类似于运算符中的 逻辑与逻辑或

  1. 确保所有的异步操作完成之后,才进行某个操作,只要有一个失败,就不进行

  2. 只要有一个异步操作文章,就里面执行某个操作。

all使用如下
javascript异步解决方案_第5张图片

如有错误,如下

javascript异步解决方案_第6张图片

注意:

all 方法必须所有的异步完全正确,才会返回true,当其中一个出错的时候,返回false,并且会将第一个出错的错误信息抛出

reac的用法
javascript异步解决方案_第7张图片

注意:

reac 方法,就是赛跑的意思,意思就是说,Promise.race([p1, p2, p3])里面哪个结果获得的快,就返回那个结果,不管结果本身是成功状态还是失败状态。

2.4 使用第三方的Promise库

针对第三方的promise库,有两个知名的库:

  • bluebird
  • q.js

以bluebird为例,在服务端演示其用法

第一步,安装
javascript异步解决方案_第8张图片

第二步,使用
javascript异步解决方案_第9张图片

3. 解决方案之generator 与 co

3.1 Generator的出现

ES6 增加了一项新的内容:生成器(Generator)。生成器是一种可以从中退出并在之后重新进入的函数。生成器的环境(绑定的变量)会在每次执行后被保存,下次进入时可继续使用

3.2 Generator的使用

生成器的定义类似于普通的函数,只是要加一个*号,比如:function * g() { // 定义一个空生成器}yield关键字是生成器函数中的亮点(只能在Generator函数中才能使用,普通函数中不可使用),其字面意思为==“产出”,每次程序执行到yield==的时候,都会“产出”一个结果。

其实Generatoryield 两个词用的已经非常形象了,Generator就类似于一个工厂,每当消费者需要某种东西的时候,yield 就负责去生产,生产完了返回给消费者。

示例:

javascript异步解决方案_第10张图片

3.3 Generator的执行方式

javascript异步解决方案_第11张图片

3.4 generator和Promise、co配合使用

co库地址:https://github.com/tj/co

$ npm install co

javascript异步解决方案_第12张图片

4. 解决方案之async 与 await

async/await是对Promise的优化: async/await是基于Promise的,是进一步的一种优化,不过在写代码时,Promise本身的API出现得很少,很接近同步代码的写法;

4.1 async关键字

  • 1)表明程序里面可能有异步过程:
    • 里面可以有await关键字;也可以没有(没有表示全部同步);
  • 2)非阻塞:
    • async函数里面如果有异步过程会等待,但是async函数本身会马上返回,不会阻塞当前线程,async函数内部由await关键字修饰的异步过程,工作在相应的协程上,会阻塞等待异步任务的完成再返回;
  • 3)async函数返回类型为Promise对象:
  • 4)无等待
    • 在没有await的情况下执行async函数,它会立即执行,返回一个Promise对象,

4.2 await关键字

  • 1)await只能在async函数内部使用:不能放在普通函数里面,否则会报错;

  • 2)await关键字后面跟Promise对象:在Pending状态时,相应的协程会交出控制权,进入等待状态,这是协程的本质;

  • 3)await是async wait的意思: wait的是resolve(data)的消息,并把数据data返回,

  • 4)await后面也可以跟同步代码: 不过系统会自动将其转化成一个Promsie对象,

4.3 简单的使用案例:

javascript异步解决方案_第13张图片

源码

function timeout(ms) {
    return new Promise((resolve, reject) => {
      setTimeout(resolve, ms, "finish");
    });
  }

  //异步代码
  async function asyncTimeSys(){
      await timeout(1000);
  }

  //调用方法,接收返回值
  asyncTimeSys().then((value)=>{
      console.log(value);
  });

你可能感兴趣的:(华衫培训系列,服务器相关笔记,javascript,promise,async,await,异步)