Promise 用法小结

89500297 2020-05-16

Promise

一、解决问题

我们知道Promise是javaScript中异步编程的一种解决方法。在介绍Promise前,我们思考下Promise 的诞生解决了哪些问题呢?

ES6之前,我们使用回调函数和事件处理异步操作,用来解决javaScript单线程运行时可能导致的UI渲染阻塞的问题

事件:对象的某个属性是一个函数,当发生某种行为时,运行该函数

callback回调函数:运行某个函数以实现某个功能的时候,传入一个函数作为参数,在某个特定条件下触发该函数

但是,使用回调函数也带来几个问题:

  1. 回调函数放在参数的位置,嵌套回调造成回调地狱
  2. 回调函数的代码和开始任务代码不在同一事件循环中,异步同步任务不能联系
  3. 处理并行任务棘手,请求之间互不依赖

二、解决方案——异步模型

  1. ECMA将异步操作分为三个状态:

    pedding——等待状态(未决阶段),表示事件还在进行中

    resolved——已经处理(已决阶段),表示事件产生预期的结果

    rejected——已拒绝(已决阶段),表示事件产生偏离预期的结果

    我们使用网络请求解释三种状态,请求的过程是pedding状态,请求结果状态码为200为resolved状态,请求结果状态码是500为rejected状态

  2. pedding状态具有一定控制走向的能力

    resolve方法——将事件推向resolved状态,并且可以传递一些数据

    reject方法——将事件推向rejected状态,并且附带一些错误信息

    只有异步操作的结果,可以决定当前是哪一种状态,任何其他操作都无法改变这个状态

  3. 一旦状态更改,不再变化。任何时候都可以获得结果

  4. 事件到达已决阶段需要进行后续处理

    thenable函数——作为resolved状态的后续处理

    catchable函数——作为rejected状态的后续处理

三、基本用法

Promise是一个容器,保存着在某个未来结束的异步操作的结果

let promise = new Promise((resolve, reject) => {
	/*
	1.函数内部代码立即执行,不可取消
	2.放置ajax请求等异步操作的位置
	3.通过调用resolve函数将Promise推向已决的resolved状态
	4.通过调用rejected将Promise推向已决的rejected状态
    */
    if(/*异步操作成功*/) {
       resolve(data)
    } else {
       reject(error) 
    }  
})
promise.then((res) => {
    /*
	1.thenable函数,进入resolved状态立即执行
	2.当前为pedding状态,加入任务队列
    */
    console.log("回调成功")
}).catch((error) => {
    /*
	1.catchable函数,进入rejected状态立即执行
	2.当前为pedding状态,加入任务队列
    */
    console.log("回调失败")
})

四、Promise 链式调用

Promise实例,每次then方法或者catch方法结束后都会返回一个新的Promise实例

如果前一个Promise实例的状态是 resolved 并且then()的回调函数没有出错,将回调函数的返回值作为下一个then回调函数的参数

const myPromise = new Promise((resolve, reject) => {
    resolve(‘helloWorld‘);
})
myPromise.then(res => {
    console.log(res); // ‘helloWorld‘
    return 1;
}).then(res => {
    console.log(res); // 输出1
})

如果前一个Promise实例的状态是 resolved 但是then()的回调函数发生错误,将抛出的错误信息作为下一个catch回调函数的参数

const myPromise = new Promise((resolve, reject) => {
    resolve(‘helloWorld‘);
})
myPromise.then(res => {
    console.log(res); // ‘helloWorld‘
    throw new Error("test")
    return 1;
}).then(res => {
    console.log("data:",res); 
}, error => {
    console.log("error:", error) //error: Error: "test"
})

如果前一个Promise实例的状态是 rejected 但是then()的没有处理错误的回调函数,将抛出的错误信息作为下一个catch回调函数的参数

const myPromise = new Promise((resolve, reject) => {
    reject(‘helloWorld‘);
})

 myPromise.then(res => {
    console.log(‘helloWorld‘);
    //上方触发了reject, 没有相对应的处理catchable函数
    //错误直接抛给下一个Promise并触发下一个Promise的rejected状态
}).catch(error => {
    console.log("error:",error); //error: helloWorld
})

如果在 then 中使用return,那么 return 的值也会Promise.resove()包装

五、Promise API

(一) Promise.prototype.then()

then()方法的作用是为 Promise实例添加状态改变时的回调函数

接收两个参数,resolved状态的回调函数和rejected状态的回调函数。第二个参数可选

then方法返回的是一个新的Promise实例,实现链式调用

getJSON("/posts.json").then(function(json) {
  return json.post;
}).then(function(post) {  
  //将上一个回调函数结果作为参数传入第二个回调函数
});

(二)Promise.prototype.catch()

catch()方法用于指定发生错误时的回调函数,

异步操作抛出错误,状态变为rejected,立即调用catch(),并且可以捕获 Promise实例中抛出的错误

在创建Promise实例传入的函数参数中, 如果代码报错, 则会立即触发reject方法

const promise = new Promise(function(resolve, reject) {
  throw new Error(‘test‘);
});
promise.catch(function(error) {
  console.log(error);
});
// Error test

(三) Promise.prototype.finally()

finally()方法用于指定Promise 对象都会执行的操作,不管最后状态如何

finally方法的回调函数不接受任何参数

romise
.then(result => {···})
.catch(error => {···})
.finally(() => {···})

(四) Promise.all()

Promise.all()方法用于将多个 Promise 实例,包装成一个新的 Promise 实例,

const p = Promise.all([p1, p2, p3]);

p的状态由p1、p2、p3决定,分成两种情况

(1)只有p1、p2、p3的状态都变成fulfilled,p的状态才会变成fulfilled,此时p1、p2、p3的返回值组成一个数组,传递给p的回调函数

(2)只要p1、p2、p3之中有一个被rejected,p的状态就变成rejected,此时第一个被reject的实例的返回值,会传递给p的回调函数

需要同时等待多个Promise异步操作完成以后再做某件事的话可以用到Promise.all()

const getGirlResponse = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve(Math.random() > 0.5 ? ‘1同意了‘ : ‘1拒绝表白‘);
    }, 1000)
})
const getSecGirlResponse = new Promise((resolve, reject) => {
   setTimeout(() => {
       if(Math.random() > 0.5) {
           resolve(Math.random() > 0.5 ? ‘2同意了‘ : ‘2拒绝表白‘);
       } else {
           reject("2打了你一巴掌")
       }
    }, 1000)
})
const getTrdGirlResponse = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve(Math.random() > 0.5 ? ‘3同意了‘ : ‘3拒绝表白‘);
    }, 1000)
})
Promise.all([getGirlResponse, getSecGirlResponse, getTrdGirlResponse]).then(resp => {
    console.log(resp); 
}).catch(error => {
    console.log(error);
})

(五) Promise.race()

Promise.race()方法同样是将多个 Promise 实例,包装成一个新的 Promise 实例

const p = Promise.race([p1, p2, p3]);

只要p1、p2、p3之中有一个实例率先改变状态,p的状态就跟着改变。率先改变的 Promise 实例的返回值,就传递给p的回调函数

let intervalTime = () => Math.random() * 2000 
const getGirlResponse = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve(Math.random() > 0.5 ? ‘1同意了‘ : ‘1拒绝表白‘);
    }, intervalTime())
})
const getSecGirlResponse = new Promise((resolve, reject) => {
   setTimeout(() => {
        resolve(Math.random() > 0.5 ? ‘2同意了‘ : ‘2拒绝表白‘);
    }, intervalTime())
})
const getTrdGirlResponse = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve(Math.random() > 0.5 ? ‘3同意了‘ : ‘3拒绝表白‘);
    }, intervalTime())
})
Promise.race([getGirlResponse, getSecGirlResponse, getTrdGirlResponse]).then(resp => {
    console.log(resp); 
}).catch(error => {
    console.log(error);
})

(六)Promise.resolve()

Promise.resolve()方法将现有对象转为 Promise 对象

Promise.resolve()方法允许调用时不带参数,直接返回一个resolved状态的 Promise 对象

(七)Promise.reject()

Promise.reject(reason)方法也会返回一个新的 Promise 实例,该实例的状态为rejected

六、常见使用

(一)嵌套任务处理

//多个异步任务之间存在依赖性的
getJson("url")
    .then(n => {getJson(n[0].url)})
    .then(m => {getJson(m[0].url)})
    .then(w => {getJson(w[0].url)})
    .catch((error => {console.log("异常错误")}))
  1. then方法返回一个 Promise 对象,连续调用 then 方法就能链式调用 Promise
  2. 多个异步任务中可能出现错误,只需要调用一个 catch 方法并向其传入错误处理的回调函数

(二)并行处理任务

// 并行处理多个异步任务
Promise.all([getJson(url), getJson(url), getJson(url)])
  .then((resule) => {
    // 如果三个请求都响应成功
    if (result[0] == 1 && result[1] == 1 && result[2] == 1) {
      console.log("请求成功");
    }
  })
  .catch((error) => {
    console.log("异常错误");
  });

七、实现 Promise

参考文档

https://blog.csdn.net/weixin_44238796/article/details/103159716

https://juejin.im/post/5e4943d0f265da57537eaba9#heading-19

https://mp.weixin.qq.com/s/UNzYgpnKzmW6bAapYxnXRQ

相关推荐