Promise 讲解，js知识，es6

深碍√TFBOYSˉ_ 2023-10-13 21:41 36阅读 0赞

#### 文章目录 ####

*  一、Promise的三种状态
 *   *  1. 初始态pending
     *  2. 成功态fulfilled，调用resolve方法
     *  3. 失败态rejected，调用reject方法
 *  二、Promise的方法
 *   *  then方法
     *  catch方法
 *  三、async和await
 *   *  async 函数
     *  await 表达式
 *  四、代码举例帮助理解
 *   *  1、Promise的值通过then方法获取
     *  2、reject的值通过catch方法获取
     *  3、Promise得到状态之后，状态不可改变
     *  4、then和catch方法执行之后会返回一个相同状态值为fulfilled（成功）的Promise对象
     *  5、then方法的返回值会进入到Promise对象中的PromiseResult
     *  6、then方法的连续调用
     *  7、Promise对象可以反复使用，调用then方法并不会改变对象本身
     *  8、让then和catch方法返回一个resolved（错误）状态的Promise对象
     *  封装ajax请求
 *  参考文档

## 一、Promise的三种状态 ##

### 1. 初始态pending ###

*  pending。它的意思是 “待定的，将发生的”，相当于是一个初始状态。创建Promise对象时，且没有调用resolve或者是reject方法，相当于是初始状态。这个初始状态会随着你调用resolve，或者是reject函数而切换到另一种状态。

### 2. 成功态fulfilled，调用resolve方法 ###

*  resolved。表示解决了，就是说这个承诺实现了。 要实现从pending到resolved的转变，需要在 创建Promise对象时，在函数体中调用了resolve方法(即第一个参数)。

### 3. 失败态rejected，调用reject方法 ###

*  rejected。拒绝，失败。表示这个承诺没有做到，失败了。要实现从pending到rejected的转换，只需要在创建Promise对象时，调用reject函数。

![在这里插入图片描述][ce2517525ce24aa1859f4ae764c88d2f.png]

## 二、Promise的方法 ##

### then方法 ###

*  在then方法的参数函数中,通过形参使用Promise对象的结果
 *  then方法返回一个新的Promise实例,状态是pending
 *  在then方法中,通过return将返回的Promise实例改为fulfilled状态
 *  在then方法中,出现代码错误,将返回的Promise实例改为rejected状态

### catch方法 ###

*  当Promise的状态改为rejcted.被执行
 *  当Promise执行过程出现代码错误时,被执行

## 三、async和await ##

### async 函数 ###

*  函数的返回值为 promise 对象
 *  promise 对象的结果由 async 函数执行的返回值决定

### await 表达式 ###

*  await 右侧的表达式一般为 promise 对象, 但也可以是其它的值
 *  如果表达式是 promise 对象, await 返回的是 promise 成功的值
 *  如果表达式是其它值, 直接将此值作为 await 的返回值

## 四、代码举例帮助理解 ##

### 1、Promise的值通过then方法获取 ###

const firstPromise001 = new Promise((resolve,reject)=>{
        
        resolve("这是我的成功状态")
    })
    firstPromise001.then((res)=>{
        
        console.log('resolve中的值为='+res)
    })

![在这里插入图片描述][d4267460a5324d53a246d19d7c6845c1.png]

const firstPromise002 = new Promise((resolve,reject)=>{
        
        reject("这是我的失败状态")
    })
    firstPromise002.then((res)=>{
        
        console.log('resolve（正确）中的值为='+res)
    },(err)=>{
        
        console.log('reject（错误）中的值为='+err)
    })

![在这里插入图片描述][7cd8103d637445e88ad6845401488bfc.png]

### 2、reject的值通过catch方法获取 ###

*  只能获取rejected状态的值

const firstPromise001 = new Promise((resolve,reject)=>{
        
        reject("这是我的失败状态")
    })
    firstPromise001.catch((err)=>{
        
        console.log('reject中的值为='+err)
    })

![在这里插入图片描述][2cf63c4432be43fcbfd5f0bf5df97aad.png]

### 3、Promise得到状态之后，状态不可改变 ###

a=0
    const firstPromise = new Promise((resolve,reject)=>{
        
        a++
        //状态不能改变，执行了resolve方法之后状态就确定了。
        //但是不代表执行了resolve之后，方法就结束了，reject也会正常执行（不会报错），只不过是无效执行而已，所以控制台的a=3
        resolve("这是我的成功状态")
        a++
        reject("这是我的失败状态")
        a++
    })
    console.log(firstPromise)
    console.log(a)

![在这里插入图片描述][109d527a98984a799f17c7dbc96bc2f6.png]

### 4、then和catch方法执行之后会返回一个相同状态值为fulfilled（成功）的Promise对象 ###

*  无论是什么状态的Promise对象都能调用then方法，但是只有rejected（失败）状态的才能调用catch方法
 *  作者为什么要探究这个呢？因为 then方法返回的对象是一个状态为fulfilled（成功）的Promise，所以then方法调用结束之后可以继续调用then方法。但是catch不行，catch方法结束之后只能调用then方法，不能调用catch方法，因为调用catch方法的条件是状态为rejected（失败）。

const thenPromise = new Promise((resolve,reject)=>{
        
        resolve("这是我的成功状态")
    }).then((res)=>{
        
        console.log('resolve中的值为='+res)
    })
    const catchPromise = new Promise((resolve,reject)=>{
        
        reject("这是我的失败状态")
    }).catch((err)=>{
        
        console.log('reject中的值为='+err)
    })
    console.log(thenPromise)
    console.log(catchPromise)

![在这里插入图片描述][4ebcdfa67f9c413ca3514a2d7302a871.png]

### 5、then方法的返回值会进入到Promise对象中的PromiseResult ###

const firstPromise = new Promise((resolve,reject)=>{
        
        resolve("这是我的成功状态")
    }).then((res)=>{
        
        console.log('第一次then输出的状态='+res)
        return "第一次调用then的返回";
    })

![在这里插入图片描述][bfd9e6147cc749aaab28c64338920dda.png]

### 6、then方法的连续调用 ###

const firstPromise = new Promise((resolve,reject)=>{
        
        resolve("这是我的成功状态")
    }).then((res)=>{
        
        console.log('第一次then输出的状态='+res)
        return "第一次调用then的返回";
    }).then((res)=>{
        
        console.log('第二次then输出的状态='+res)
        return "北京"
    }).then((res)=>{
        
        console.log('第三次then输出的状态='+res)
    })

![在这里插入图片描述][9d296a6c6fad4e80a3e5deb4c52dc25d.png]

### 7、Promise对象可以反复使用，调用then方法并不会改变对象本身 ###

const firstPromise = new Promise((resolve,reject)=>{
        
        resolve("这是我的成功状态")
    })
    
    console.log(firstPromise)
    
    firstPromise.then((res)=>{
        
        console.log('resolve中的值为='+res)
    })
    firstPromise.then((res)=>{
        
        console.log('resolve中的值为='+res)
    })
    firstPromise.then((res)=>{
        
        console.log('resolve中的值为='+res)
    })
    
    console.log(firstPromise)

![在这里插入图片描述][20127890bceb4f589ca24249c4e57f21.png]

### 8、让then和catch方法返回一个resolved（错误）状态的Promise对象 ###

*  错误信息会封装到Promise对象中的PromiseResult

const firstPromise = new Promise((resolve,reject)=>{
        
        resolve("这是我的成功状态")
    }).then((res)=>{
        
        throw new Error('作者用于测试的程序错误')
        console.log('第一次then输出的状态='+res)
        return "第一次调用then的返回";
    })
    
    console.log(firstPromise)
    
    firstPromise.catch((err)=>{
        
        console.log('把错误信息打印到控制台='+err)
    })

![在这里插入图片描述][ddc1a3782b5b4c23b75d58a1551cfb5b.png]

### 封装ajax请求 ###

// 封装ajax请求
    function getData(url, data = {
         }){
        
    	return new Promise((resolve, reject) => {
        
      	$.ajax({
        
          // 发送请求类型
        	type: "GET",
          url: url,
          data: data,
          success: function (res) {
        
          	// 修改Promise状态为成功, 修改Promise的结果res
            resolve(res)
          },
          error:function (res) {
        
          	// 修改Promise的状态为失败,修改Promise的结果res
            reject(res)
          }
        })
      }
    }
    
    // 调用函数
    getData("data1.json")
      .then((data) => {
        
      	// console.log(data)
        const {
         id } = data
        return getData("data2.json", {
        id})
      })
      .then((data) => {
        
      	// console.log(data)
        const {
         usename } = data
        return getData("data3.json", {
        usename})
      })
      .then((data) => {
        
      	console.log(data)
      })

## 参考文档 ##

*  [Promise的三种状态][Promise]
 *  [Promise][Promise 1]

[ce2517525ce24aa1859f4ae764c88d2f.png]: https://img-blog.csdnimg.cn/ce2517525ce24aa1859f4ae764c88d2f.png
[d4267460a5324d53a246d19d7c6845c1.png]: https://img-blog.csdnimg.cn/d4267460a5324d53a246d19d7c6845c1.png
[7cd8103d637445e88ad6845401488bfc.png]: https://img-blog.csdnimg.cn/7cd8103d637445e88ad6845401488bfc.png
[2cf63c4432be43fcbfd5f0bf5df97aad.png]: https://img-blog.csdnimg.cn/2cf63c4432be43fcbfd5f0bf5df97aad.png
[109d527a98984a799f17c7dbc96bc2f6.png]: https://img-blog.csdnimg.cn/109d527a98984a799f17c7dbc96bc2f6.png
[4ebcdfa67f9c413ca3514a2d7302a871.png]: https://img-blog.csdnimg.cn/4ebcdfa67f9c413ca3514a2d7302a871.png
[bfd9e6147cc749aaab28c64338920dda.png]: https://img-blog.csdnimg.cn/bfd9e6147cc749aaab28c64338920dda.png
[9d296a6c6fad4e80a3e5deb4c52dc25d.png]: https://img-blog.csdnimg.cn/9d296a6c6fad4e80a3e5deb4c52dc25d.png
[20127890bceb4f589ca24249c4e57f21.png]: https://img-blog.csdnimg.cn/20127890bceb4f589ca24249c4e57f21.png
[ddc1a3782b5b4c23b75d58a1551cfb5b.png]: https://img-blog.csdnimg.cn/ddc1a3782b5b4c23b75d58a1551cfb5b.png
[Promise]: https://blog.csdn.net/Maybe__row/article/details/124534729
[Promise 1]: https://www.yuque.com/wanfeng-uqsak/alyy23/ri5217