Promose的实现

583 阅读2分钟
  • Promise 的用途

假设现在有一个名为 createAudioFileAsync() 的函数,它接收一些配置和两个回调函数,然后异步地生成音频文件。第一个回调函数在文件成功创建时的被调用,另一个则在出现异常时的被调用。

以下为使用 createAudioFileAsync() 的示例:

// 成功的回调函数
function successCallback(result) {
  console.log("音频文件创建成功: " + result);
}

// 失败的回调函数
function failureCallback(error) {
  console.log("音频文件创建失败: " + error);
}

createAudioFileAsync(audioSettings, successCallback, failureCallback)

而更现代的函数会返回一个 promise对象,使得你可以将你的回调函数绑定在该 promise 上。

如果函数 createAudioFileAsync() 被重写为返回promise的形式,那么我们可以向下面这样简单地调用它:

const promise = createAudioFileAsync(audioSettings); 
promise.then(successCallback, failureCallback);

或者简写为:

createAudioFileAsync(audioSettings).then(successCallback, failureCallback);

  • 如何创建一个 new Promise

利用jQuery库,创建一个new Pronise的

$.ajax('get','/xxx')
      .then(()=>{}//默认第一个为成功回调
      , ()=>{})//第二个函数为失败回调
      
      return new Promise((resolve,reject)=>{})
  • 如何使用 Promise.prototype.then

then() 方法返回一个 Promise。它最多需要有两个参数:Promise 的成功和失败情况的回调函数。

const promise1 = new Promise(function(resolve, reject) {
  resolve('Success!');
});

promise1.then(function(value) {
  console.log(value);
  // "Success!"
});
  • 如何使用 Promise.all

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

const promise1 = Promise.resolve(3);
const promise2 = 42;
const promise3 = new Promise(function(resolve, reject) {
  setTimeout(resolve, 100, 'foo');
});

Promise.all([promise1, promise2, promise3]).then(function(values) {
  console.log(values);
});
// Array [3, 42, "foo"]
  • 如何使用 Promise.race

Promise.race(iterable) 方法返回一个 promise,一旦迭代器中的某个promise先解决或拒绝,返回的promise就会解决或拒绝。

const promise1 = new Promise(function(resolve, reject) {
    setTimeout(resolve, 500, 'one');
});

const promise2 = new Promise(function(resolve, reject) {
    setTimeout(resolve, 100, 'two');
});

Promise.race([promise1, promise2]).then(function(value) {
  console.log(value);
  // Both resolve, but promise2 is faster
});
// "two"

参考文章:MDN文档