【MDN学习】JavaScript 之 Promise

x33g5p2x  于2022-03-15 转载在 Java  
字(5.0k)|赞(0)|评价(0)|浏览(191)

JavaScript Pomise API 学习

Promise.xx 表示类方法

Promise.prototype.xxx 表示实例方法

一、Promise 构造函数

语法:new Promise(executor)

executor 参数
  1. 接收双参数(resolve, reject), resolve 和 reject 分别是执行成功 与 失败的函数
  2. Promise 接收立即执行,一般用来处理异步操作
  3. 运行成功,则 resolve 掉这个 promise
  4. 运行失败,则 reject 掉
  5. 如果运行时抛出异常,promise 的状态就会变成 rejected,则 executor 的返回值会被忽略

二、Promise.prototype.then()

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

// 语法 onFulfilled 【执行成功的回调】 onRejected 【执行失败的回调】
p.then(onFulfilled[, onRejected]);

p.then(value => {
  // fulfillment
}, reason => {
  // rejection
});

三、Promise.prototype.catch()

catch() 方法返回的也是一个 Promise,则意味着改程序处理被拒绝了

// Promise.prototype.catch()

// 出异常案例
let p = new Promise((resolve, reject) => {
    reject("error");
});

p.catch(reason => {
    console.log(reason);	// error
});

四、Promise.resolve(value)

resolve() 方法返回一个给定解析后 Promise 对象,resolve 里面如果传递一个 Promise 对象,那么传递的也是 Promise 对象,依次类推

const promise1 = Promise.resolve(123);

promise1.then((value) => {
  console.log(value);
  // expected output: 123
});

更多示例:传送门

五、Promise.reject(reason)

reject()方法返回一个带有拒绝原因Promise对象,参数即为被拒绝的原因

// 还记得前面是怎么写的吗? then 传入的是个 executor
Promise.reject(new Error('fail')).then(function() {
  // not called
}, function(error) {
  console.error(error); // Stacktrace
});

六、Promise.all()

Promise.all() 方法接收一个promise的i terable 类型(注:Array,Map,Set都属于ES6的iterable类型)的输入,并且只返回一个Promise实例

Promise.all(iterable);	// Promise 传入的是可迭代的对象(Promise)

简单来说,可以一次接收多个 Promise,只会返回一个 Promise 实例,但是 Promise 是有两种返回情况的

  1. 所传入的 promise 均正常执行并返回,resolve 的回调结果是一个数组,即我们传入的所有 Promise 实例
  2. reject 表示只有一个失败,则返回第一个失败的结果

成功的案例

let p = new Promise((resolve, reject) => {
    resolve("OK");
});

let p2 = Promise.resolve("Success");
let p3 = Promise.resolve("Nice");

const result = Promise.all([p,p2,3]);

console.log(result);	
/**
Promise
[[Prototype]]: Promise
[[PromiseState]]: "fulfilled"
[[PromiseResult]]: Array(3)
0: "OK"
1: "Success"
2: "Nice"
length: 3
[[Prototype]]: Array(0)
*/

失败的案例

let p = new Promise((resolve, reject) => {
    resolve("OK");
});

let p2 = Promise.reject("Error");
let p3 = Promise.resolve("Nice");

const result = Promise.all([p,p2,p3]);
console.log(result);

/**
Promise {<pending>}
[[Prototype]]: Promise
[[PromiseState]]: "rejected"
[[PromiseResult]]: "Error"
*/

划重点!当你有多个异步任务执行时,需要有某个任务失败就立刻停止时,就可以使用 Promise.all()

用官方的话说,``Promise.all()更适合彼此相互依赖或者在其中任何一个reject`时立即结束

七、Promise.allSettled()

前面有 Promise.all() ,现在又有了 Promise.allSettled(),该对象方法和 Promise.all() 的使用方式是一样的,但是它的作用和 Promise.all() 不一样

常常用于你想知道每个 Promise 的执行结果

let p = new Promise((resolve, reject) => {
    resolve("OK");
});

let p2 = Promise.reject("Error");
let p3 = Promise.resolve("Nice");

// const result = Promise.all([p,p2,p3]);
Promise.allSettled([p,p2,p3]).then((results) => {
    results.forEach(element => {
        console.log(element);	// {status:'fullfilled or rejected', value: 'value or reasonn'}
    });
})

八、Promise.any()

Warning !!!Promise.any() 当前时实验性功能,并不被所有游览器支持

这个方法用于返回第一个成功的 promise 。只要有一个 promise 成功此方法就会终止,它不会等待其他的 promise 全部完成。

语法:

Promise.any(iterable);	// iterable 一个可迭代的对象, 例如 Array,Set,Map 等。

返回值:

  • 如果传入的参数是一个空的可迭代对象,则返回一个 已失败(already rejected) 状态的 Promise
  • 如果传入的参数不包含任何 promise,则返回一个 异步完成asynchronously resolved)的 Promise
  • 其他情况下都会返回一个处理中(pending)Promise。 只要传入的迭代对象中的任何一个 promise 变成成功(resolve)状态,或者其中的所有的 promises 都失败,那么返回的 promise 就会 异步地(当调用栈为空时) 变成成功/失败(resolved/reject)状态。

看个实例吧!

// 返回第一个成功的案例
const pErr = new Promise((resolve, reject) => {
  reject("总是失败");
});

const pSlow = new Promise((resolve, reject) => {
  setTimeout(resolve, 500, "最终完成");
});

const pFast = new Promise((resolve, reject) => {
  setTimeout(resolve, 100, "很快完成");
});

Promise.any([pErr, pSlow, pFast]).then((value) => {
  console.log(value);// "很快完成"
  // pFast fulfils first
})

// 没有成功的案例,则抛出异常
const pErr = new Promise((resolve, reject) => {
  reject('总是失败');
});

Promise.any([pErr]).catch((err) => {
  console.log(err);	 // "AggregateError: No Promise in Promise.any was resolved"
})

九、Promise.race()

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

简言之,也就是说只要有一个成功 或者 失败,就会返回第一个结果,如果数组为空

语法

Promise.race(iterable);	// iterable 是一个可迭代对象 Array,Set,Map 等

示例:

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

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

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

十、Promise.prototype.finally()

finally() 方法返回一个Promise。在promise结束时,无论结果是fulfilled或者是rejected,都会执行指定的回调函数。这为在Promise是否成功完成后都需要执行的代码提供了一种方式。

这避免了同样的语句需要在then()catch()中各写一次的情况。

语法:

p.finally(onFinally);

p.finally(function() {
   // 返回状态为(resolved 或 rejected)
});

示例:

let isLoading = true;

fetch(myRequest).then(function(response) {
    var contentType = response.headers.get("content-type");
    if(contentType && contentType.includes("application/json")) {
      return response.json();
    }
    throw new TypeError("Oops, we haven't got JSON!");
  })
  .then(function(json) { /* process your JSON further */ })
  .catch(function(error) { console.log(error); })
  .finally(function() { isLoading = false; });

十一、Promise 特性

  1. 支持链式调用, 解决回调地狱问题
  2. 同步调用
let p = new Promise((resolve, reject) => {
    console.log("aaa");
});

console.log("bbb");

// aaa
// bbb

二、原文链接

《Gorit 带你学全栈 — JavaScript 高级应用(第二弹)》

相关文章