Promise的初步理解

178 阅读2分钟

Promise 的用途 首先要了解Promise是什么,有什么用,为啥要用它?

是什么?

当谈到Promise的时候,你肯定顺便听到回调、异步、这样的玩意。其实说得通俗一点,Promise就是一种写代码的方式,并且是用来写JavaScript编程中的异步代码的。

基本用法 一句话:

return new Promise((resolve,reject)=>{}) 如何创建一个 new Promise:

new Promise(function(resolve, reject) { … } )

构造函数用一个函数作为参数,该函数有两个参数,两个参数均是回调函数,由JS引擎提供,你不用自己部署了。第一个参数resolve,当异步操作成功时会调用,它有一个参数用于传递异步操作成功的结果。第二个参数reject,当异步操作失败时会调用,它有一个参数用于传递异步操作失败的信息。例如:

异步操作 jsvar myPromise = new Promise(function(resolve, reject) {
if( success ) { resolve(value); } else { reject(error); } });

如何使用 Promise.prototype.then 在多个含有异步操作的函数之间有依赖关系时,为清晰的展示依赖关系,建议使用如下方法。

当then方法返回一个新的Promise实例(注意,不是原来那个Promise实例)。可以采用链式写法,即then方法后面再调用另一个then方法

getJSON("/post/1.json").then(function(post) {
  return getJSON(post.commentURL);
}).then(function (comments) {
  console.log("resolved: ", comments);
}, function (err){
  console.log("rejected: ", err);
});

Promise.all的使用 在实际项目中,可能会遇到 需要从前两个接口中的返回结果获取第三个接口的请求参数这种情况。 也就是需要等待两个/多个异步事件完成后,再进行回调。 对于异步回调,首先想到的就会是使用Promise封装,然后使用.then()来触发回调。那么对于两个或多个异步事件均完成后再触发回调可以使用Promise.all()方法。

Promise.all(iterable) 方法返回一个 Promise 实例,此实例在 iterable 参数内所有的 promise 都“完成(resolved)”或参数中不包含 promise 时回调完成(resolve);如果参数中 promise 有一个失败(rejected),此实例回调失败(reject),失败原因的是第一个失败 promise 的结果。

var promise1 = Promise.resolve('promise1');
var promise2 = new Promise(function(resolve, reject) {
  setTimeout(resolve, 2000, 'promise2');
});
var promise3 = new Promise(function(resolve, reject) {
  setTimeout(resolve, 1000, 'promise3');
});

Promise.all([promise1, promise2, promise3]).then(function(values) {
  console.log(values);
});
// expected output: Array ["promise1","promise2", "promise3"]

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

let p1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('success')
  },1000)
})

let p2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    reject('failed')
  }, 500)
})

Promise.race([p1, p2]).then((result) => {
  console.log(result)
}).catch((error) => {
  console.log(error)  // 打开的是 'failed'
})