Skip to content

Promise ​

基本语法 ​

Promise 就是为了解决“回调地狱”问题的,它可以将异步操作的处理变得很优雅。回调地狱,代码难以维护, 常常第一个的函数的输出是第二个函数的输入这种现象 promise 可以支持多个并发的请求,获取并发请求中的数据这个 promise 可以解决异步的问题,本身不能说 promise 是异步的。

创建 Promise 实例

js

const promise = new Promise((resolve,reject)=>{
  if(/*异步操作*/){
     resolve(value)
  }else {
    reject(value)
  }
})

Promise 构造函数接受一个函数作为参数,该函数的两个参数分别是 resolve 和 reject。它们是两个函数,由 JavaScript 引擎提供,不用自己部署。

Promise 实例生成后,可以用 then 方法分别指定 resolved 状态和 rejected 状态的回调函数

js
promise
  .then((res) => {
    console.log("成功");
  })
  .catch((res) => {
    console.log("失败");
  });

注意

状态转化是单向的,不可逆转的.无法返回初始状态

只能从 pending 到 fulfilled 或者 rejected

Promise.then() ​

这段代码创建一个 Promise 对象,定义了处理 onFulfilled 和 onRejected 的函数(handler),然后返回这个 Promise 对象。

这个 Promise 对象会在变为 resolve 或者 reject 的时候分别调用相应注册的回调函数。

示例 ​

js
var promise = new Promise(function (resolve, reject) {
  resolve("传递给then的值");
});
promise.then(
  function (value) {
    console.log(value);
  },
  function (error) {
    console.error(error);
  }
);

Promise.all() ​

必须都成功才返回

示例 ​

js
var p1 = Promise.resolve(1);
var p2 = Promise.resolve(2);
var p3 = Promise.resolve(3);
Promise.all([p1, p2, p3]).then(function (results) {
  console.log(results); // [1, 2, 3]
});

all 这里特别注意 只有当 promise 数组里免所有的 Promise 对象都变成 resolve 的时候,它才返回

如果参数中任何一个 promise 为 reject 的话,则整个 Promise.all 调用会立即终止,并返回一个 reject 新的 promise 对象

Promise.rece() ​

race 竞速 谁快就返回谁

示例 ​

js
var p1 = Promise.resolve(1);
var p2 = Promise.resolve(2);
var p3 = Promise.resolve(3);
Promise.race([p1, p2, p3]).then(function (value) {
  console.log(value); // 1
});

Promise.race 生成并返回一个新的 Promise 对象。

参数 promise 数组中的任何一个 Promise 对象如果变为 resolve 或者 reject 的话, 该函数就会返回,并使用这个 Promise 对象的值进行 resolve 或者 reject。

Promise.allSettled ​

不管成功还是没成功,都返回数据,独立自主

示例 ​

js
var p1 = Promise.resolve(1);
var p2 = Promise.resolve(2);
var p3 = Promise.resolve(3);
Promise.allSettled([p1, p2, p3])
  .then(function (value) {
    console.log(value); //[1,2,3]
  })
  .catch((res) => {
    console.log(res);
  });

Promise.allSettled()方法返回一个 promise,该 promise 在所有给定的 promise 已被解析或被拒绝后解析,并且每个对象都描述每个 promise 的结果。

Promise.finally() ​

指定不管最后状态如何都会执行的回调函数。

Promise.prototype.finally() 方法返回一个 Promise,在 promise 执行结束时,无论结果是 fulfilled 或者是 rejected,在执行 then()和 catch()后,都会执行 finally 指定的回调函数。这为指定执行完 promise 后,无论结果是 fulfilled 还是 rejected 都需要执行的代码提供了一种方式,避免同样的语句需要在 then()和 catch()中各写一次的情况。

示例 ​

js
new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("success");
    // reject('fail')
  }, 1000);
})
  .then((res) => {
    console.log(res);
  })
  .catch((err) => {
    console.log(err);
  })
  .finally(() => {
    console.log("finally");
  });

场景一 : loading ​

需要每次发送请求,都会有 loading 提示,请求发送完毕,就需要关闭 loading 提示框,不然界面就无法被点击。不管请求成功或是失败,这个 loading 都需要关闭掉,这时把关闭 loading 的代码写在 finally 里再合适不过了。

场景二:数据库断开连接 ​

js

let connection
db.open()
    .then(conn => {
        connection = conn
        return connection.select({
            name: 'Jane'
        })
    })
    .then(result => {
        // Process result
        // Use `connection` to make more queries
    })···
    .catch(error => {
        // handle errors
    })
    .finally(() => {
        connection.close()
    })

推荐阅读 ​