关于前端:前端-JavaScript异步编程Promise

什么是Promise

Promise 是异步编程的一种解决方案。ES6中曾经提供了原生Promise对象。一个Promise对象会处于以下几种状态（fulfilled，rejected两种状态一旦确定后不会扭转）：

待定（pending）: 初始状态，既没有被兑现，也没有被回绝。
已兑现（fulfilled）: 意味着操作胜利实现。
已回绝（rejected）: 意味着操作失败。

根本用法

Promise对象是一个构造函数，用来创立Promise实例，它接管两个参数resolve和reject。

resolve的作用是将Promise对象的状态从pending变为fulfilled，在异步操作胜利时调用，并将异步操作的后果，作为参数传递进来。
reject的作用是将Promise对象的状态从pending变为rejected，在异步操作失败时调用，并将异步操作报出的谬误，作为参数传递进来。

const promise = new Promise(function(resolve, reject) {
  // ... 
  if (/* 异步操作胜利 */){
    resolve(value);
  } else {
    reject(error);
  }
});

Promise实例生成当前，应用then办法别离指定fulfilled状态和rejected状态的回调函数。

then接管两个参数，第一个是Promise对象的状态变为fulfilled时的回调函数，第二个是状态变为rejected时的回调函数。
catch接管Promise对象的状态变为rejected时的回调函数。

promise.then(function (value){
    // ....
},function (err){
    // .... err
})
  
promise.then(function (value){
    // ....
}).catch(function (err){
    // ....
})

Promise的办法

Promise.prototype.then()

then办法是定义在原型对象Promise.prototype上，后面说过，它接管两个可选参数，第一个参数是fulfilled状态的回调函数，第二个参数是rejected状态的回调函数。

then办法返回的是一个新的Promise实例，不便咱们采纳链式写法。比方then前面接着写then，当第一个回调函数实现当前，会将返回后果作为参数，传入第二个回调函数。这种链式形式能够很不便的指定一组依照秩序调用的回调函数。

loadData().then(function (value){
    return 3
}).then(function (num){
    console.log("ok", num) // 3
})

Promise.prototype.catch()

catch办法是用于指定产生谬误时的回调函数。如果异步操作抛出谬误，状态就会变为rejected，就会调用catch()办法指定的回调函数，解决这个谬误。

const promise = new Promise(function(resolve, reject) {
  throw new Error('unkonw error'); // 抛出谬误状态变为 -> reject
});
const promise = new Promise(function(resolve, reject) {
  reject('unkonw error') // 应用reject()办法将状态变为 -> reject
});
promise.catch(function(error) {
  console.log(error);
});

Promise对象的谬误会始终向后传递，直到被捕捉为止。比方上面代码：catch会捕捉loadData和两个then外面抛出的谬误。

loadData().then(function(value) {
  return loadData(value);
}).then(function(users) {
 
}).catch(function(err) {
  // 解决后面三个Promise产生的谬误
});

如果咱们不设置catch()，当遇到谬误时Promise不会将谬误抛出里面，也就是不会影响内部代码执行。

const promise = new Promise(function(resolve, reject) {
      resolve(a) // ReferenceError: a is not defined
});
promise.then(function(value) {
  console.log('value is ', value)
});
setTimeout(() => { console.log('code is run') }, 1000); // code is run

Promise.prototype.finally()

finally()办法不论 Promise 对象最初状态如何，都会执行的操作。上面是咱们应用 Promise 的一个惯例构造。

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

Promise.all()

Promise.all()办法能够将多个 Promise 实例包装成一个新的 Promise 实例返回。

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

新promise状态来依赖于“传入的promise”。

只有当所有“传入的promise”状态都变成fulfilled，它的状态才会变成fulfilled，此时“传入的promise”返回值组成一个数组，传递给promise的回调函数。
如果“传入的promise”之中有一个被rejected，新promise的状态就会变成rejected，此时第一个被reject的promise的返回值，会传递给promise的回调函数。

const promises = [1,2,3,4].map(function (id) {
  return loadData(id);
});

Promise.all(promises).then(function (users) {
  // ...
}).catch(function(err){
  // ...
});

Promise.race()

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

Promise.race()办法的参数与Promise.all()办法一样。

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

Promise.all() 和 Promise.race()比照：

Promise.all() ，如果所有都执行胜利则返回所有胜利的promise值，如果有失败则返回第一个失败的值。
Promise.race()，返回第一个执行实现的promise 值，它可能是fulfilled和rejected状态。

这两个办法的应用场景。

场景一，用户登录社交网站主页后，会同时异步申请拉取用户信息，关注列表，粉丝列表，咱们须要保障所有数据申请胜利再进行渲染页面，只有有一个数据不胜利就会重定向页面，这里能够应用Promise.all。

function initUserHome() {
  Promise.all([
  new Promise(getMe),
  new Promise(getFollows),
  new Promise(getFans)
])  
    .then(function(data){
        // 显示页面
  })
    .catch(function(err){
    // .... 重定向页面
  });
};

initUserHome();

场景二，如果咱们在做一个抢票软件，尽管申请了很多卖票渠道，每次只需返回第一个执行实现的Promise，这里能够应用Promise.race。

function getTicket() {
  Promise.race([
  new Promise(postASell),
  new Promise(postBSell),
  new Promise(postCSell)
])  
    .then(function(data){
        // 抢票胜利
  })
    .catch(function(err){
    // .... 抢票失败，重试
  });
};

getTicket();

Promise.allSettled()

应用Promise.all()时，如果有一个Promise 失败后，其它Promise 不会进行执行。

const requests = [
  fetch('/url1'),
  fetch('/url2'),
  fetch('/url3'),
];

try {
  await Promise.all(requests);
  console.log('所有申请都胜利。');
} catch {
  console.log('有一个申请失败，其余申请可能还没完结。');
}

有的时候，咱们心愿等到一组异步操作都完结了，再进行下一步操作。这时就须要应用Promise.allSettled()，的它参数是一个数组，数组的每个成员都是一个 Promise 对象，返回一个新的 Promise 对象。它只有等到参数数组的所有 Promise 对象都产生状态变更（不论是fulfilled还是rejected），返回的 Promise 对象才会产生状态变更。

const requests = [
  fetch('/url1'),
  fetch('/url2'),
  fetch('/url3'),
];

await Promise.allSettled(requests);
console.log('所有申请实现后（包含成功失败）执行');

Promise.any()

只有传入的Promise有一个变成fulfilled状态，新的Promise就会变成fulfilled状态；如果所有传入的Promise都变成rejected状态，新的Promise就会变成rejected状态。

Promise.any()和Promise.race()差不多，区别在于Promise.any()不会因为某个 Promise 变成rejected状态而完结，必须等到所有参数 Promise 变成rejected 状态才会完结。

回到Promise.race()多渠道抢票的场景，如果咱们须要保障要么有一个渠道抢票胜利，要么全副渠道都失败，应用Promise.any()就显得更适合。

function getTicket() {
  Promise.any([
  new Promise(postASell),
  new Promise(postBSell),
  new Promise(postCSell)
])  
    .then(function(data){
        // 有一个抢票胜利
  })
    .catch(function(err){
    // .... 所有渠道都失败了
  });
};

getTicket();

Promise.resolve()

Promise.resolve()办法将现有对象转换为Promise对象。等价于上面代码：

new Promise(resolve => resolve(1))

传入的参数不同，解决

参数Promise 实例，它将不做任何批改、一成不变地返回这个实例。
参数thenable对象，它会将这个对象转为 Promise 对象，而后就立刻执行thenable对象的then()办法。
```
let thenable = {
  then: function(resolve, reject) {
    resolve(1);
  }
};
```

参数是一般值，返回一个新的 Promise 对象，状态为resolved。

const promise = Promise.resolve(1);

promise.then(function (value) {
  console.log(value) // 1
});

无参数，间接返回一个resolved状态的 Promise 对象。

Promise.reject()

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

const promise = Promise.reject('unkonw error');
// 相当于
const promise = new Promise((resolve, reject) => reject('unkonw error'))

promise.then(null, function (s) {
  console.log(s)
});
// unkonw error

简略场景

异步加载图片：

function loadImageAsync(url) {
  return new Promise(function(resolve, reject) {
      const image = new Image();
    image.onload  = resolve;
    image.onerror = reject;
    image.src = url;
  });
}

申请超时解决：

//申请
function request(){
    return new Promise(function(resolve, reject){
          // code ....
         resolve('request ok')
    })
}

function timeoutHandle(time){
         return new Promise(function(resolve, reject){
        setTimeout(function(){
            reject('timeout');
        }, time);
    });
}

Promise.race([
    request(),
    timeoutHandle(5000)
])
.then(res=>{
    console.log(res)
}).catch(err=>{
    console.log(err)// timeout
})

小结

本文演绎了Promise相干办法和一些简略用法，欢送留言交换。

关于前端:前端-JavaScript异步编程Promise

什么是Promise

根本用法

Promise的办法

Promise.prototype.then()

Promise.prototype.catch()

Promise.prototype.finally()

Promise.all()

Promise.race()

Promise.allSettled()

Promise.any()

Promise.resolve()

Promise.reject()

简略场景

小结

评论

发表回复取消回复

更多文章

DDN HPC 存储硬件架构设计深度分析

探秘IO500：从Lustre并行文件系统出发，开启HPC存储性能新征程

苹果iOS打包的ipa应用无法安装？一篇文章带你了解可能的原因及排查方法

图解Golang：从零开始实现简易版过期LRU缓存

关于前端:前端-JavaScript异步编程Promise

什么是Promise

根本用法

Promise的办法

Promise.prototype.then()

Promise.prototype.catch()

Promise.prototype.finally()

Promise.all()

Promise.race()

Promise.allSettled()

Promise.any()

Promise.resolve()

Promise.reject()

简略场景

小结

评论

发表回复 取消回复

更多文章

DDN HPC 存储硬件架构设计深度分析

探秘IO500：从Lustre并行文件系统出发，开启HPC存储性能新征程

苹果iOS打包的ipa应用无法安装？一篇文章带你了解可能的原因及排查方法

图解Golang：从零开始实现简易版过期LRU缓存

发表回复取消回复