对Promise的了解(MDN)

1,729 阅读2分钟

promise在js中主要是解决回调地狱 什么是回调地狱呢?回调地狱就是我们异步任务中嵌套异步任务太多层,导致我们的代码臃肿,而promise链式调用解决这种代码问题。从语法上讲,promise是一个对象,从它可以获取异步操作的消息;从本意上讲,它是承诺,承诺它过一段时间会给你一个结果。promise有三种状态: pending(等待态),fulfiled(成功态),rejected(失败态);状态一旦改变,就不会再变。创造promise实例后,它会立即执行。


如何创建一个 new Promise

return new Promise((resolve,reject)=>{})

Promise 的用途

先从回调说起

get((data) => {
})

如果嵌套多层呢?

get1(data1 => {
    get2(data1, data2 => {
       get3(data2, data3 => {
          get4(data3, data4 => { 
             get5(data4, data5 => { 
             }) 
          }) 
       }) 
    }) 
})

这样几行代码就已经眼花了,如果嵌套的层级再多呢?我们的Promise就发挥作用了

get1()
.then(get2)
.then(get3)
.then(get4)
.then(get5)
.then(data => {
})

那么如何使用 Promise.prototype.then?

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

  • 语法:
p.then(onFulfilled[, onRejected]);

p.then(value => {
  // fulfillment接收状态调用的函数
}, reason => {
  // rejection拒绝状态掉用的函数
});

如何使用 Promise.all

  • 语法:
Promise.all(iterable);

Promise.all() 方法接收一个promise的iterable类型(注:Array,Map,Set都属于ES6的iterable类型)的输入,并且只返回一个Promise实例,那个输入的所有promise的resolve回调的结果是一个数组。

  • 用法:
var p1 = Promise.resolve(3);
var p2 = 1337;
var p3 = new Promise((resolve, reject) => {
  setTimeout(resolve, 100, 'foo');
});

Promise.all([p1, p2, p3]).then(values => {
  console.log(values); // [3, 1337, "foo"]
});

如何使用 Promise.race

  • 语法:
Promise.race(iterable);

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

  • 用法:
let p1 = new Promise(function(resolve, reject) { 
    setTimeout(resolve, 500, "你好"); 
});
var p2 = new Promise(function(resolve, reject) { 
    setTimeout(resolve, 100, "再见"); 
});
   
Promise.race([p1, p2]).then(function(value) {
  console.log(value);
});
  1. Promise.race() 方法参数是一个数组,数组元素是Promise对象。
  2. p2的状态首先发生变化,于是将"再见"传递给then的回调函数。
  3. 所以打印结果是"再见"。
let p1 = new Promise(function(resolve, reject) { 
    setTimeout(reject, 50, "你好"); 
});
var p2 = new Promise(function(resolve, reject) { 
    setTimeout(resolve, 100, "再见"); 
});
   
Promise.race([p1, p2]).then(function(value) {
  console.log(value);
},function(value){
  console.log(value);
});
  1. 这次是p1的状态首先发生改变,变为rejected。
  2. 于是执行then的第二个回调函数,并将"你好"作为参数传递给回调函数。
  3. 所以最终打印结果是"你好"