【Vue文档补全计划】Promise部分

最新推荐文章于 2023-12-20 16:28:15 发布

alicelmx

最新推荐文章于 2023-12-20 16:28:15 发布

阅读量171

点赞数

分类专栏：前端学习文章标签： promise vue 前端

本文链接：https://blog.csdn.net/alicelmx/article/details/109329109

版权

本文详细介绍了Promise在Vue中的应用，包括Promise的基本概念、核心要点、基本语法和高级使用方法。通过实例解析了如何创建Promise对象，进行异步操作，以及如何通过链式调用来处理异步操作的结果。此外，文章还探讨了Promise的状态传递性和错误处理机制。

摘要由CSDN通过智能技术生成

简单介绍

Promise意在让异步代码变得干净和直观，让异步代码变得井然有序。
Promise在设计上具有原子性，即只有三种状态：等待（Pending）、成功（Fulfilled）、失败（Rejected）。在调用支持Promise的异步方法时，逻辑变得非常简单，在大规模的软件工程开发中具有良好的健壮性。
在这里插入图片描述

核心要点

Promise是一个构造函数，所以可以 new 出一个Promise的实例；
在Promise上有两个函数 resolve (成功之后的回调函数)和 reject (失败后的回调函数)；
在Promise构造函数的prototype属性上，有一个 .then() 方法。所以只要是Promise构造函数创建的实例，都可以访问到 .then()方法；
Promise表示一个一步操作，每当我们new一个Promise的实例，这个实例就代表具体的异步操作。
Promise创建的实例，是一个异步操作，这个异步操作结果，只有两种结果：
状态1：异步执行成功，需要在内部调用成功的回调函数resolve把结果返回给调用者
状态2：异步执行失败，需要在内部调用失败的回调函数reject把结果返回调用者
由于Promise的实例是一个异步操作，所以内部拿到操作结果后，无法使用return把操作结果返回给调用者，这个时候只能使用回调函数的形式，把成功或失败的结果，返回给调用者，具体：我们可以在new出来的Promise实例上，调用 .then()方法，预先为这个Promise异步操作，指定成功(resolve)和失败(reject)回调函数。

基本写法

new Promise((resolve, reject) => {
   
  setTimeout(() => {
   
    // resolve("Hello World");
    reject("error message");
  }, 1000)
}).then((data) => {
   
  console.log(data);
}).catch((err) => {
   
  console.log(err);
})