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

1次阅读

共计 5558 个字符，预计需要花费 14 分钟才能阅读完成。

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){// ....})

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

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

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

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

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

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

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 实例，包装成一个新的 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.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 有一个变成 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 对象。等价于上面代码：

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(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 相干办法和一些简略用法，欢送留言交换。

正文完

前端

发表至：前端

2021-10-20

0

关于前端:如何使用码匠连接-Elasticsearch

关于前端:Vue-多个连续修饰符的效果

关于前端:APIPOST怎样内置系统变量

关于webpack:你不了解的webpack第二期

关于前端: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()

简略场景

小结

站内搜索