【Vue.js 知识量化】Promise

╰半橙微兮° 2022-08-30 15:53 140阅读 0赞

### Promise ###

*  认识 Promise
 *   *  定时器的异步事件
     *  Promise 基本使用
     *  Promise 三种状态
     *  Promise 链式调用

# 认识 Promise #

Promise 是异步编程的一种解决方案，为了解决 **回调地狱**。

> **回调地狱**：考虑下面的场景
> 
>  *  我们需要通过一个 url1 从服务器加载一个数据 data1，data1 中包含了下一个请求的 url2
>  *  我们需要通过 data1 取出 url2，从服务器加载数据 data2，data2 中包含了下一个请求的 url3
>  *  我们需要通过 data2 取出 url3，从服务器加载数据 data3，data3 中包含了下一个请求的 url4
>  *  发送网络请求 url4，获取最终的数据 data4  
>     ![在这里插入图片描述][84d8cb8479df329894a1b7d3e06a84ae.png]

使用 Promise 可以以一种非常优雅的方式来解决这个问题

## 定时器的异步事件 ##

`setTimeout()` 执行的代码可以用来模拟异步请求

setTimeout(() => { 
        console.log("hello world!");
    }, 1000);
    
    console.log("1234567");

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

## Promise 基本使用 ##

new Promise((resolve, reject) => { 
      setTimeout(() => { 
        resolve("hello world!");
        reject("error data!");
      }, 1000);
    }).then(data => { 
      console.log(data);
    }).catch(error => { 
      console.log(error);
    });

解析：resolve 和 reject 是函数，通常情况下根据请求数据的成功和失败来决定调用哪一个

*  如果成功，会调用 resolve(messsage)，此时后续的 then 会被回调
 *  如果失败，会调用 reject(error)，此时后续的 catch 会被回调

## Promise 三种状态 ##

![在这里插入图片描述][73391d52389fc9f24146f3c59428ee3b.png]  
当开发中有异步操作时，就可以给异步操作包装一个 Promise，异步操作之后会有三种状态

*  **pending**：等待状态，比如正在进行网络请求，或者定时器没有到时间。
 *  **fulfill**：满足状态，当我们主动回调了 resolve 时就处于该状态，并且会回调 .then()
 *  **reject**：拒绝状态，当我们主动回调了 reject 时就处于该状态，并且会回调 .catch()

## Promise 链式调用 ##

最复杂的写法：

new Promise((resolve, reject) => { 
      setTimeout(() => { 
        resolve('aaa')
      }, 1000)
    }).then(res => { 
      console.log(res, '第一层的10行处理代码');
      return new Promise((resolve, reject) => { 
        resolve(res + '111')
      })
    }).then(res => { 
      console.log(res, '第二层的10行处理代码');
      return new Promise(resolve => { 
        resolve(res + '222')
      })
    }).then(res => { 
      console.log(res, '第三层的10行处理代码');
    }).catch(err => { 
      console.log(err);
    })

简化写法，使用 `Promise.resolve()` 和 `Promise.reject()`：

*  `Promise.resovle()`：将数据包装成 Promise 对象，并且在内部回调 resolve() 函数
 *  `Promise.reject()`：将数据包装成 Promise 对象，并且在内部回调 reject() 函数

new Promise((resolve, reject) => { 
      setTimeout(() => { 
        resolve('aaa')
      }, 1000)
    }).then(res => { 
      console.log(res, '第一层的10行处理代码');
      return Promise.resolve(res + '111')
    }).then(res => { 
      console.log(res, '第二层的10行处理代码');
      return Promise.resolve(res + '222')
    }).then(res => { 
      console.log(res, '第三层的10行处理代码');
    });

简化写法：直接 return data

new Promise((resolve, reject) => { 
      setTimeout(() => { 
        resolve('aaa')
      }, 1000)
    }).then(res => { 
      console.log(res, '第一层的10行处理代码');
      return res + '111'
    }).then(res => { 
      console.log(res, '第二层的10行处理代码');
      return res + '222'
    }).then(res => { 
      console.log(res, '第三层的10行处理代码');
    })

[84d8cb8479df329894a1b7d3e06a84ae.png]: /images/20220829/3ad3465da090446bbf69b6dd35f57512.png
[a46b1443b331fa3b7155a092400d8430.png]: /images/20220829/b1408ac6af244fef87cc0fa59d224e40.png
[73391d52389fc9f24146f3c59428ee3b.png]: /images/20220829/f57e82fbb1f24a6fae6dd18572bfc4ad.png