微信小程序> 微信小程序|promise(下)手写promise

微信小程序|promise(下)手写promise

浏览量:4941 时间: 来源:GC怪兽
// 三个状态 resolved(解决) rejected(拒绝) pending(等待)// promise中放了一个函数 函数executor 执行器// resolve和reject都是函数  调用后可以让状态进行改变// promise解决的问题有 //1) 回调地狱 //2)解决 并发异步,再同一时刻内获取并发的结果 //3) 链式调用 (jquery)//常用写法let promise=new Promise((resolve,reject)=>{    setTimeout(()=>{  //这个定时器就相当于我们的异步代码 (比如ajax)      resolve('123')    })  })promise.then(res=>{    console.log(res)  //123},err=>{    })//链式调用  说明then返回的是一个Promise的实例promise.then(res=>{    console.log(res)  },err=>{    }).then(res=>{    console.log(res)  },err=>{    })

执行顺序

//执行顺序let promise=new Promise((resolve,reject)=>{      resolve('123')    console.log(1)  })promise.then(res=>{    console.log(res)  //123},err=>{    })//打印顺序 1,123//默认promise中的executor(就是Promise中的参数)是同步执行的  //而then中的参数相当于回调

值的穿透

//值的穿透 then不传参数就默认走到下一then中promise.then().then(res=>{    console.log(res)  //123},err=>{    })

then的问题

//then的问题// 最常见的  如果返回的是普通值 直接把值作为外层下一次then的参数promise.then(res=>{    return 1 //返回除了Promise外的参数 直接把值作为外层下一次then的参数},err=>{    }).then(res=>{    console.log(res)  //1},err=>{    })

注意

// then方法调用后,返回的是一个新的promise  //会把这个promise下的所有包括当前返回的promise执行完毕  取到成功或失败的结果//当做外层下一次then的成功或失败的结果  执行过程中失败就直接取失败 //成功就一直执行 知道完后拿到结果promise.then((data) => {  return new Promise((resolve,reject)=>{    resolve(new Promise((resolve,reject)=>{      resolve('123456');    }))  })}, err => {  console.log( err);}).then(res=>{    console.log(res)  //123456},err=>{    })

手写promise

class Promise {  constructor(executor) {    // 默认状态是等待态    this.status = 'pending';    //成功后的值    this.value = undefined;    //失败的原因    this.reason = undefined;    // 存放成功的回调  解决异步调用  就是我们常用的写法那种     this.onResolvedCallbacks = [];    // 存放失败的回调  用成功就有失败    this.onRejectedCallbacks = [];    //resolve,reject 我们executor中的参数    let resolve = (data) => {      //当resolve调用时相当于成功  所以改变状态为成功 reject同理      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); // promise失败了    }  }  //then 也有两个参数 成功的回调  和失败的回调  then(onFulFilled, onRejected) {    // 解决onFulFilled,onRejected没有传的问题  值的穿透    onFulFilled = typeof onFulFilled === 'function' ? onFulFilled : y => y;    onRejected = typeof onRejected === 'function' ? onRejected : err => { throw err; };        let promise2; //then的返回值    if (this.status === 'resolved') {      promise2 = new Promise((resolve, reject) => {        // 成功的逻辑 失败的逻辑        setTimeout(() => {//模拟Promise执行顺序          try {            let x = onFulFilled(this.value);            // 看x是不是promise 如果是promise 取他的结果 作为promise2,成功的结果            // 如果要是返回一个普通值 作为promise2,成功的结果            // resolvePromise可以解析x和promise2之间的关系            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  }}function resolvePromise(promise2, x, resolve, reject) {  // 判断x是不是promise2  // [规范]里规定了一段代码,这个代码可以实现我们的promise和别人的promise可以进行交互  if (promise2 === x) { // 不能自己等待自己完成    return reject(new TypeError('循环引用'));  }  // x不是null或者是对象或者函数  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;    

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

最新资讯

热门模板

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎