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()
    })

推荐阅读