乐趣区

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

什么是 Promise

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

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

根本用法

Promise对象是一个构造函数,用来创立 Promise 实例,它接管两个参数 resolvereject

  • 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,此时第一个被rejectpromise的返回值,会传递给 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))

传入的参数不同,解决

  1. 参数Promise 实例,它将不做任何批改、一成不变地返回这个实例。
  2. 参数 thenable 对象,它会将这个对象转为 Promise 对象,而后就立刻执行 thenable 对象的 then() 办法。

    let thenable = {then: function(resolve, reject) {resolve(1);
      }
    };
  3. 参数是一般值,返回一个新的 Promise 对象,状态为resolved

    const promise = Promise.resolve(1);
    
    promise.then(function (value) {console.log(value) // 1
    });
  4. 无参数,间接返回一个 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 相干办法和一些简略用法,欢送留言交换。

退出移动版