关于Promise知识点都在这里

kpengfang
1,471 阅读6分钟

Promise是什么？(承诺)

Promise本意是承诺，在程序中的意思就是承诺我过一段时间后会给你一个结果。 什么时候会用到过一段时间？答案是异步操作，异步是指可能比较长时间才有结果的才做，例如网络请求、读取本地文件等。

Promise的三种状态

pending是对象创建后的初始状态，当对象fulfill（成功）时变为fulfilled，当对象reject（失败）时变为rejected。且只能从pengding变为fulfilled或rejected ，而不能逆向或从fulfilled变为rejected 、从rejected变为fulfilled。如图所示：

Promise是一种异步流程的控制手段;

  • 回调地狱，代码难以维护，第一个的输入是第二个的输入。比如常用的ajax调用，代码如下：
$.ajax(
    success(){
        $.ajax(
            success(){
                
            }
        )
    }
)

promise链式调用

  • 可以支持多个并发的请求，获取并发请求中的数据;
a().b()//比如这个a执行完了，执行b
ajax()//1
ajax()//2
  • 可以解决异步的问题，本身不能说promise是异步的(then方法是异步的)

promise（承诺）关键词 resolve成功 reject失败 pending 等待

  • 如果一旦promise成功了就不能失败，相反也是一样的； 只有状态是等待的状态时才可以转化状态；每一个promise的实例上都有一个then方法,then方法中有两个参数，一个参数叫成功的函数，一个是失败的函数；promise中发生错误 就会执行失败态。
let p = new Promise((resolve,reject)=>{//默认promise中的excutor是同步执行的。
    resolve('承诺');//resolev走成功
    reject('没承诺');//reject 走失败
});
p.then((value)=>{//value成功的原因
    console.log('success');
},(err)=>{//err失败的原因
    console.log('faile');
})

用Promise链式调用读取文件解决金字塔demo

金字塔demo:

let fs = require('fs');
fs.readFile('1.txt','utf8',function(err,data){
    if(err)return console.log(err);
    
    fs.readFile(data,'utf8',function(err,data){
        if(err)return console.log(err);
        console.log(data);
        
        fs.readFile(data,'utf8',function(err,data){
        if(err)return console.log(err);
        console.log(data);
    })
    })
})

promise 链式调用

  • 如果返回的是promise那么会取这个promise的结果，如过成功会走外层的promise的下一个then的成功，将数据传递到成功里；
  • promise 实现链式调用返回的并不是this而是一个新的promise。
function read(url) {
  return new Promise((resolve,reject)=>{
    fs.readFile(url, 'utf8', function (err, data) {
      if(err) reject(err);
      resolve(data);
    })
  })
}
// 链式调用--前提新建两个文本文档，分别是1.txt和2.txt; 1.txt里面写的2.txt,2.txt里面写的222
read('1.txt').then((data)=>{
  return read(data);//如果返回了一个新的promise
  //return 100;//如果返回的是一个普通值就会走到写一个then中的成功回调
  //throw new Error();//假如成功里面抛出个异常，会走下一个then的失败
}).then(data=>{
  console.log(data);//222 输出的2.txt里面的内容
},err=>{
  console.log(err);
}).then(data=>{
  console.log(data,'000');//undefined '000'
});//失败之后还可以再then,依然会走到成功这里的then

Promise.all和Promise.race以及Promise.resole Promise.reject

Promise.all 例子：

  • Promise.all方法调用会返回一个新的promise
let fs = require('fs');
function read(url) {
  return new Promise((resolve, reject) => {
    fs.readFile(url, 'utf8', function (err, data) {
      if (err) reject(err);
      resolve(data);
    })
  })
}
//第一种
// Promise.all([read('1.txt'),read('2.txt')]).then((data)=>{
//   console.log(data);
// })
//第二种
Promise.all([read('1.txt'),read('2.txt')]).then((r1,r2)=>{
  console.log(r1,r2);
},err=>{
  console.log(err);
});

Promise.race 例子：

  • Promise.race赛跑 顺序执行不一定,处理多个请求只取最快的
let fs = require('fs');
function read(url) {
  return new Promise((resolve, reject) => {
    fs.readFile(url, 'utf8', function (err, data) {
      if (err) reject(err);
      resolve(data);
    })
  })
}
//如果读取的文件不存在，就直接走失败了
Promise.race([read('1.txt'),read('2.txt')]).then((data)=>{
  console.log(data);
},err=>{
  console.log(err);
});

Promise成功失败的例子：

  • Promise.resolve()返回一个成功的promise
  • Promise.reject()返回一个失败的promise
Promise.resolve('success').then(data=>{
    console.log('data')//success
})
Promise.reject('fail').then(null,data=>{//希望第一个参数不传，此处的null可以忽略掉
    console.log(data);//fail
})

Promise源码分解

  • 根据Promises/A（Promise的官方标准）咱家实现一个160行左右代码的Promise。

1、构造器

class Promise {
  constructor(executor) {
    this.status = 'pending';
    this.value = undefined;
    this.reason = undefined;
    this.onResolvedCallbacks = [];
    this.onRejectedCallbacks = [];
    let resolve = (data) => {
      if (this.status === 'pending') {
        this.value = data;
        this.status = 'resolved';
        this.onResolvedCallbacks.forEach(fn => fn());
      }
    }
    let reject = (reason) => {
      if (this.status === 'pending') {
        this.reason = reason;
        this.status = 'rejected';
        this.onRejectedCallbacks.forEach(fn => fn());
      }
    }
    try {
      executor(resolve, reject);
    } catch (e) {
      reject(e);
    }
  }
  then(onFulFilled, onRejected) {
    onFulFilled = typeof onFulFilled === 'function' ? onFulFilled : y => y;
    onRejected = typeof onRejected === 'function' ? onRejected : err => { throw err; };
    let promise2;
    if (this.status === 'resolved') {
      promise2 = new Promise((resolve, reject) => {
        setTimeout(() => {
          try {
            let x = onFulFilled(this.value);
            resolvePromise(promise2, x, resolve, reject);
          } catch (e) {
            reject(e);
          }
        }, 0);
      });
    }
    if (this.status === 'rejected') {
      promise2 = new Promise((resolve, reject) => {
        setTimeout(() => {
          try {
            let x = onRejected(this.reason);
            resolvePromise(promise2, x, resolve, reject)
          } catch (e) {
            reject(e);
          }
        }, 0);
      });
    }
    if (this.status === 'pending') {
      promise2 = new Promise((resolve, reject) => {
        this.onResolvedCallbacks.push(() => {
          setTimeout(() => {
            try {
              let x = onFulFilled(this.value);
              resolvePromise(promise2, x, resolve, reject)
            } catch (e) {
              reject(e);
            }
          }, 0)
        });
        // 存放失败的回调
        this.onRejectedCallbacks.push(() => {
          setTimeout(() => {
            try {
              let x = onRejected(this.reason);
              resolvePromise(promise2, x, resolve, reject);
            } catch (e) {
              reject(e);
            }
          }, 0);
        });
      })
    }
    return promise2; // 调用then后返回一个新的promise
  }
  // catch接收的参数 只用错误
  catch(onRejected) {
    // catch就是then的没有成功的简写
    return this.then(null, onRejected);
  }
}

2、官方给出了一个叫做resolvePromise的函数

function resolvePromise(promise2, x, resolve, reject) {
  if (promise2 === x) {
    return reject(new TypeError('循环引用'));
  }
  if (x !== null && (typeof x === 'object' || typeof x === 'function')) {
    let called;
    try { // 防止取then是出现异常 Object.defineProperty
      let then = x.then; // 取x的then方法 {then:{}}
      if (typeof then === 'function') { // 如果then是函数我就认为它是promise
        // call 第一个参数是this ，后面的是成功的回调和失败的回调
        then.call(x, y => { // 如果y是promise就继续递归解析promise
          if (called) return;
          called = true;
          resolvePromise(promise2, y, resolve, reject);
        }, r => { // 只要失败了就失败了
          if (called) return;
          called = true;
          reject(r);
        });
      } else { // then是一个普通对象，就直接成功即可1
        resolve(x);
      }
    } catch (e) {
      if (called) return;
      called = true;
      reject(e);
    }
  } else { // x = 123
    resolve(x); // x就是一个普通值
  }
}

3、接下来是Promise的常用方法

  • Promise.resolve
  • Promise.reject
  • Promise.race
  • Promise.all
//生成一个成功的promise
Promise.resolve = function (val) {
  return new Promise((resolve, reject) => resolve(val))
}
//生成一个失败的promise
Promise.reject = function (val) {
  return new Promise((resolve, reject) => reject(val));
}
//Promise.race就是赛跑的意思，哪个结果获得的快，就返回那个结果，不管结果本身是成功状态还是失败状态。
Promise.race = function (promises) {
  return new Promise((resolve, reject) => {
    for (let i = 0; i < promises.length; i++) {
      promises[i].then(resolve, reject);
    }
  });
}
//Promise 对象上的静态方法，该方法的作用是将多个 Promise 对象实例包装，生成并返回一个新的 Promise 实例。
Promise.all = function (promises) {
  return new Promise((resolve,reject)=>{
    let arr = [];
    let i = 0; // i的目的是为了保证获取全部成功，来设置的索引
    function processData(index,data) {
      arr[index] = data;
      i++;
      if (i === promises.length){
        resolve(arr);
      }
    }
    for(let i = 0;i<promises.length;i++){
      promises[i].then(data=>{
        processData(i,data);
      }, reject);
    }
  })
}
Promise.deferred = Promise.defer = function () {
  let dfd = {};
  dfd.promise = new Promise((resolve, reject) => {
    dfd.resolve = resolve;
    dfd.reject = reject;
  })
  return dfd;
}

最后一步一定要记得

module.exports = Promise; //导出模块

4、完成了一个Promise源码，接下来可以安装一个node模块进行测试代码； 安装模块：npm install promises-aplus-tests -g 执行命令：promises-aplus-tests 文件名

npm install promises-aplus-tests -g //安装测试模块
promises-aplus-tests Promise.js

经过node包命令测试，完全符合Promise规范。

avatar
文章
阅读
粉丝