前端JavaScript之Promise
1、什么是promise
promise
是异步编程的一种解决方案。es6中已经提供了原生 promise
对象。一个 promise
对象会处于以下几种状态(fulfilled
,rejected
两种状态一旦确定后不会改变):
-
待定(
pending
): 初始状态,既没有被兑现,也没有被拒绝。 -
已兑现(
fulfilled
): 意味着操作成功完成。 -
已拒绝(
rejected
): 意味着操作失败。
2、基本用法
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){ // .... })
3、promise的方法
3.1 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 })
3.2 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
3.3 promise.prototype.finally()
finally()
方法不管 promise
对象最后状态如何,都会执行的操作。下面是我们使用 promise 的一个常规结构。
promise .then(result => {···}) .catch(error => {···}) .finally(() => {···});
3.4 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){ // ... });
3.5 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();
3.6 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('所有请求完成后(包括成功失败)执行');
3.7 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();
3.8 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
对象。
3.9 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
4、简单场景
异步加载图片:
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 })
到此这篇关于前端javascript
之promise
的文章就介绍到这了,更多相关javascript promise
内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持!
上一篇: 前端JavaScript中的class类
下一篇: 原生JS学习笔记(三)