前端开发-关于异步编程

异步编程

　　本篇主要介绍关于js异步编程的知识点，包括总结promise的基本用法，手写一个自定义的promise以及ES8加入的async和await语法。

 

1.promise的概念

　　首先promise是服务异步编程而在ES6中加入的新特性，本质也是一个对象。（这里的异步操作一般为io操作，一般有三类：文件读取、网络请求和数据库读取）

　　实例化一个promise对象，promise接收一个函数，函数中又含有两个参数，注意这两个参数也是函数类型，在异步操作完成后根据返回结果来判断执行resolve还是reject，resolve和reject既可以保存异步操作后的结果，也会改变promise的状态，promise的状态有三种（padding待定，fulfilled成功和rejected失败），其中resolve会将状态改为fulfilled，而reject会将状态改为rejected。

const p = new Promise((resolve,reject) => {
    // 这里做异步操作
    if(!err){
        resolve();
    }else{
        reject(); 
    }
})    

 

2.promise.then()方法

　　介绍完promise的概念后，我们来介绍promise的核心方法then()，then方法中接受两个回调函数，与promise的成功和失败两个状态相对应，且根据状态来执行相应的方法。

　　

p.then(
 res=>{
       console.log(res)     
    } 
  reason=>{
        console.log(reason)
    }       
)        

 

3.promise读取多文件的实例

// 需求：异步读取三个文件的内容并打印下来
const fs = require('fs')

const p = new Promise((resolve, reject)=>{
  fs.readFile('./resource/1.md',(err,data)=>{
    if(err) reject(err) // 若出现错误用reject接收错误
    resolve(data) // 若成功用resolve保存data数据
  })
})
p.then(res=>{ // 这里的res是resolve(data)存储的data数据
  // 注意这里返回的是一个promise对象，以为我们根据promise的状态去判断文件是否读取成功，而读取结果是通过resolve来保存
  return new Promise((resolve, reject)=>{
    fs.readFile('./resource/2.md',(err,data)=>{
      if(err) reject(err) 
      resolve([res,data]) // 这里目的是将读取结果封装成一个数组，再有resolve来保存这个数组
    })
  })
}).then(res=>{ // 此时的res为[res,data]
  return new Promise((resolve, reject)=>{
    fs.readFile('./resource/3.md',(err,data)=>{
      if(err) reject(err) 
      const result = res.push(data) // 向数组中传入第三个文件的数据
      resolve(result) 
    })
  })
}).then(
  res=>{
    console.log(res.join('\r\n')) // 文件全部读取完毕，直接打印，没有要执行的异步操作了，不用再封装promise对象
  }
)

 

4.手写一个Promise

class Commitment {
  // 定义手写Promise的三种状态，这里使用类的静态属性static
  static PENDING = '0';
  static FULFILLED = '1';
  static REJECTED = '2';

  // 构造器写入传入的方法，该方法的两个参数也是方法，需要用普通方法定义
  constructor(func) {
    this.status = Commitment.PENDING;
    this.result = null; // 给对应状态赋相应的返回值
    // 创建数组保存resolve和reject函数
    this.resolveCallbacks = [];
    this.rejectCallbacks = [];
    // 捕获错误
    try {
      func(this.resolve.bind(this),this.reject.bind(this)); // 这里需要bind绑定this
    } catch (error) {
      this.reject(error); // 将错误通过reject抛出
    }
    
  }

  // resolve和reject是在事件循环末尾执行的，所以用setTimeout
  // 成功是调用的方法
  resolve(result) {
    setTimeout(()=>{
      if (this.status === Commitment.PENDING) {
        this.status = Commitment.FULFILLED;
        this.result = result;
        // 成功时调用成功方法数组中的回调方法
        this.resolveCallbacks.forEach(callback=>{
          callback(result)
        });
      }
    });
  }


  // 失败时调用的方法
  reject(result) {
    setTimeout(()=>{
      if (this.status === Commitment.PENDING) {
        this.status = Commitment.REJECTED;
        this.result = result;
        // 失败时调用失败方法数组中的回调方法
        this.rejectCallbacks.forEach(callback=>{
          callback(result)
        });
      }
    });
  }

  // then方法
  then(onFulFILLED,onREJECTED) {
    // 实现promisethen方法的链式调用，我们就需要在then方法中返回promise实例
    return new Commitment((resolve, reject)=>{
    // 对then方法参数做预先判断，若不为函数类型则置为空函数
    onFulFILLED = typeof onFulFILLED === 'function' ? onFulFILLED : () => {};
    onREJECTED = typeof onREJECTED === 'function' ? onREJECTED : () => {};
    // 待定时将还未运行的参数方法压入对应的状态的方法数组
    if (this.status === Commitment.PENDING) {
      this.resolveCallbacks.push(onFulFILLED);
      this.rejectCallbacks.push(onREJECTED);
    }
    if (this.status === Commitment.FULFILLED) {
      // 添加异步执行，用setTimeout
      setTimeout(()=>{
        onFulFILLED(this.result);
      });    
    }
    if (this.status === Commitment.REJECTED) {
      setTimeout(()=>{
        onREJECTED(this.result);
      }); 
    }
    });
  }
}

 

5.async和await

　　async和await的实现基础是promise对象，async可以标识一个函数作为异步函数，await只能存在async所表识的异步函数函数中，它们出现的意义是将异步代码书写起来和同步代码是一样的。另外，await后面只能跟promise对象。

　　用async+await重写一下上面的需求就是这样的：

// 首先定义三个读取方法，读取1.md,2.md和3.md

const fs = reqiure('fs')
// 这里我们的方法要返回一个Promise对象，方便后面使用
function readM1() {
  return new Promise((resolve,reject)=>{
    fs.readFile('./resource/1.md', (err,data)=>{
      if(err) reject(err)
      resolve(data)
    })
  })
}

function readM2() {
  return new Promise((resolve,reject)=>{
    fs.readFile('./resource/2.md', (err,data)=>{
      if(err) reject(err)
      resolve(data)
    })
  })
}

function readM3() {
  return new Promise((resolve,reject)=>{
    fs.readFile('./resource/3.md', (err,data)=>{
      if(err) reject(err)
      resolve(data)
    })
  })
}

async function main() {
  // 因为前面的函数返回的是promise对象，这里就可以使用await,且promise的成功值就是我们要读取的文件数据
  let m1 = await readM1()
  let m2 = await readM2()
  let m3 = await readM3()
  console.log(m1)
  console.log(m2)
  console.log(m3)
}