JavaScript Promise 基础

最新推荐文章于 2024-08-09 20:46:38 发布

_xiyang

最新推荐文章于 2024-08-09 20:46:38 发布

阅读量456

点赞数 10

分类专栏： JavaScript基础文章标签： javascript 前端

本文链接：https://blog.csdn.net/g841805/article/details/136477088

版权

JavaScript基础专栏收录该内容

3 篇文章 0 订阅

订阅专栏

Promise 的构造函数
1. 概念：Promise 构造函数是 JavaScript 中用于创建 Promise 对象的内置构造函数。Promise 构造函数接受一个函数作为参数，该函数是同步的并且会被立即执行，所以我们称之为起始函数。起始函数包含两个参数 resolve 和 reject，分别表示 Promise 成功和失败的状态。起始函数执行成功时，它应该调用 resolve 函数并传递成功的结果。当起始函数执行失败时，它应该调用 reject 函数并传递失败的原因。
2. Promise 构造函数返回一个 Promise 对象：该对象具有以下几个方法
  1. then：用于处理 Promise 成功状态的回调函数。
  2. catch：用于处理 Promise 失败状态的回调函数。
  3. finally：无论 Promise 是成功还是失败，都会执行的回调函数。
3. 例子：
```
//输出success 和 error截胡了 二选一
const promise = new Promise((resolve, reject) => {
  // 异步操作
  setTimeout(() => {
    if (Math.random() < 0.5) {
      resolve('success');
    } else {
      reject('error');
    }
  }, 1000);
});
 
promise.then((result) => {
  console.log(result);
},(val)=>{
  console.log(val+'截胡了')
}
).catch(error => {
  console.log(error);
});
```
调用顺序
1. 概念：Promise 类有 .then() .catch() 和 .finally() 三个方法，这三个方法的参数都是一个函数，.then() 可以将参数中的函数添加到当前 Promise 的正常执行序列，.catch() 则是设定 Promise 的异常处理序列，.finally() 是在 Promise 执行的最后一定会执行的序列。 .then() 传入的函数会按顺序依次执行，有任何异常都会直接跳到 catch 序列。resolve() 中可以放置一个参数用于向下一个 then 传递一个值，then 中的函数也可以返回一个值传递给 then。但是，如果 then 中返回的是一个 Promise 对象，那么下一个 then 将相当于对这个返回的 Promise 进行操作。
2. 补充：
  1. resolve 和 reject 的作用域只有起始函数，不包括 then 以及其他序列
  2. resolve 和 reject 并不能够使起始函数停止运行，别忘了 return。 then 块默认会向下顺序执行，return 是不能中断的，可以通过 throw 来跳转至 catch 实现中断
3. 例子
```
new Promise(function (resolve, reject) {
    console.log(1111);
    resolve(2222);
}).then(function (value) {
    console.log(value);
    return 3333;
}).then(function (value) {
    console.log(value);
    throw "An error";
}).catch(function (err) {
    console.log(err);
});
//输出是1111 2222 3333 An error
```

Pomise 计时器案例

代码：

function print(delay, message) {
    return new Promise(function (resolve, reject) {
        setTimeout(function () {
            console.log(message);
            resolve();
        }, delay);
    });
}
print(1000, "First").then(function () {
    return print(4000, "Second");
}).then(function () {
    print(3000, "Third");
});
//隔1秒打印 First 隔四秒 打印Second 隔3秒打印 Third

异步函数
1. 概念：异步函数（async function）是 ECMAScript 2017 (ECMA-262) 标准的规范，几乎被所有浏览器所支持，除了 Internet Explorer。
2. 使用：异步函数async function中可以使用 await 指令，await 指令后必须跟着一个 Promise，异步函数会在这个 Promise 运行中暂停，直到其运行结束再继续运行。异步函数实际上原理与 Promise 原生 API 的机制是一模一样的，只不过更便于程序员阅读。
3. 处理异常：使用 try-catch 块：
  1. ```
  async function asyncFunc1() {
      try {
          await new Promise(function (resolve, reject) {
              throw "Some error"; // 或者 reject("Some error")
          });
      } catch (err) {
          console.log(err);
          // 会输出 Some error
      }
  }
  asyncFunc1();
  async function asyncFunc2() {
      let value = await new Promise(
          function (resolve, reject) {
              resolve("Return value");
          }
      );
      console.log(value);
  }
  asyncFunc2();
```

关键点：

Promise 对象代表一个异步操作，有三种状态：pending（进行中）、fulfilled（已成功）、rejected（已失败）
Promise构造函数接收一个函数作为参数，该函数的两个参数分别是 resolve 和 reject
一个promise对象只能改变一次状态，成功或者失败后都会返回结果数据。
then 方法可以接收两个回调函数作为参数，第一个回调函数是Promise对象的状态改变为 resoved 是调用，第二个回调函数是 Promise 对象的状态变为 rejected 时调用。其中第二个参数可以省略。
catch 方法，该方法相当于最近的 then 方法的第二个参数，指向 reject 的回调函数，另一个作用是，在执行resolve回调函数时，如果出错，抛出异常，不会停止运行，而是进入catch 方法中。（catch 只捕获最近的 then 的回调函数，前面的then的执行不成功的结果，有后面 then 的 reject 回调函数执行，如果没有后续 then 回调函数执行，则会被 catch 捕获执行）

一个例子：

var promise =new Promise(function(resolve,reject){
    //To Do 要异步执行的事情，这个异步执行的事情有可能成功执行完毕，那么Promise将是fulfilled状态，如果执行失败则是rejected;
    //下面测试代码，人为设置为rejected状态;
    reject("将当前构建的Promise对象的状态由pending（进行中）设置为rejected（已拒绝）"); //当然此处也可以设置为fulfilled(已完成)状态
})

promise.then(//调用第一个then()
    success=>{
        console.log("异步执行成功，状态为：fulfilled，成功后返回的结果是："+success);
        return(" 当前 success ");
    },
    error=>{
        console.log("异步执行失败，状态为rejected，失败后返回的结果是："+error);
        return(" 当前 error ");
    }
).then(
    //调用第二个then() 因为调用第一个then()方法返回的是一个新的promise对象，此对象的状态由上面的success或者error两个回调函数的执行情况决定的：
    //如果回调函数能正常执行完毕，则新的promise对象的状态为fulfilled，下面执行success2,如果回调函数无法正常执行，则promise状态为rejected;下面执行error2
    success2=>{
        console.log("第一个then的回调函数执行成功 成功返回结果："+success2);
        throw(" 当前 success2 ");//自定义异常抛出
    },
    error2=>{
        console.log("第一个then的回调函数执行失败 失败返回结果："+error2);
        return(" 当前 error2 ");
    }
).catch(err=>{
    //当success2或者error2执行报错时，catch会捕获异常;
    console.log("捕获异常："+err);
});

//上述代码,打印如下:
//异步执行失败，状态为rejected，失败后返回的结果是：将当前构建的Promise对象的状态由pending（进行中）设置为rejected（已拒绝）
//第一个then的回调函数执行成功 成功返回结果： 当前 error
//捕获异常： 当前 success2

常见的问题
1. Q: then、catch 和 finally 序列能否顺序颠倒？
  1. A: 可以，效果完全一样。但不建议这样做，最好按 then-catch-finally 的顺序编写程序。
2. Q: 除了 then 块以外，其它两种块能否多次使用？
  1. A: 可以，finally 与 then 一样会按顺序执行，但是 catch 块只会执行第一个，除非 catch 块里有异常。所以最好只安排一个 catch 和 finally 块。
3. Q: then 块如何中断？
  1. A: then 块默认会向下顺序执行，return 是不能中断的，可以通过 throw 来跳转至 catch 实现中断。
4. Q: 什么时候适合用 Promise 而不是传统回调函数？
  1. A: 当需要多次顺序执行异步操作的时候，例如，如果想通过异步方法先后检测用户名和密码，需要先异步检测用户名，然后再异步检测密码的情况下就很适合 Promise。
5. Q: Promise 是一种将异步转换为同步的方法吗？
  1. A: 完全不是。Promise 只不过是一种更良好的编程风格。
6. Q: 什么时候我们需要再写一个 then 而不是在当前的 then 接着编程？
  1. A: 当你又需要调用一个异步任务的时候。