Promise的理解与使用

（供自己后期复习使用,如果哪里不对希望大佬指正）

1.理解promise

​ Promise是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。

通俗讲，Promise是一个许诺、承诺,是对未来事情的承诺，承诺不一定能完成，但是无论是否能完成都会有一个结果。

1. 抽象表达:
   (1) Promise 是一门新的技术(ES6 规范)
   (2) Promise 是 JS 中进行异步编程的新解决方案
   备注：旧方案是单纯使用回调函数
2. 具体表达:
   (1) 从语法上来说: Promise 是一个构造函数
   (2) 从功能上来说: promise 对象用来封装一个异步操作并可以获取其成功/
   失败的结果值

2.Promise的三种状态以及基本流程

三种状态

pending：初始值，不是resolved，也不是rejected

resolved：代表操作成功（也称为fulfilled）

rejected：代表操作失败

状态改变(如何改变状态还挺重要，这里就先不说了)

1. pending 变为 resolved
2. pending 变为 rejected
   说明: 只有这 2 种, 且一个 promise 对象只能改变一次
   无论变为成功还是失败, 都会有一个结果数据
   成功的结果数据一般称为 value, 失败的结果数据一般称为 reason

基本流程

3.Promise的基本使用

<script>
// 1) 创建 promise 对象(pending 状态), 指定执行器函数
const p = new Promise((resolve, reject) => {
// 2) 在执行器函数中启动异步任务，这里用定时器举例
    setTimeout(() => {
         const time = Date.now()
		// 3) 根据结果做不同处理
		// 3.1) 如果成功了, 调用 resolve(), 指定成功的 value, 变为 resolved 状
		态
		if (time%2===1) {
		   resolve('成功的值 '+ time)
		} else { // 3.2) 如果失败了, 调用 reject(), 指定失败的 reason, 变为
		   rejected 状态
		   reject('失败的值' + time)
		}
		}, 2000)
})
// 4) 能 promise 指定成功或失败的回调函数来获取成功的 vlaue 或失败的 reason
p.then(
    value => { // 成功的回调函数 onResolved, 得到成功的 vlaue
      console.log('成功的 value: ', value)
   },
   reason => { // 失败的回调函数 onRejected, 得到失败的 reason
      console.log('失败的 reason: ', reason)
   }
)
</script>

4.用Promise封装Ajax

fs模块使用Promise、使用 promise 封装基于定时器的异步都可以，这里选择封装Ajax

function PromiseAbc(){
            //创建 Promise
            const p = new Promise((resolve, reject) => {
                //1.创建对象
                const xhr = new XMLHttpRequest();
                //2. 初始化
                xhr.open('GET', 'URl地址');
                //3. 发送
                xhr.send();
                //4. 处理响应结果
                xhr.onreadystatechange = function(){
                    if(xhr.readyState === 4){
                        //判断响应状态码 2xx   
                        if(xhr.status >= 200 && xhr.status < 300){
                            //控制台输出响应体
                            resolve(xhr.response);
                        }else{
                            //控制台输出响应状态码
                            reject(xhr.status);
                        }
                    }
                }
            });
            //调用then方法
            p.then(value=>{
                console.log(value);
            }, reason=>{
                console.warn(reason);
            });
        }

5.Promise的一些常用API

1. Promise 构造函数: Promise (excutor) {}
   excutor 函数: 同步执行 (resolve, reject) => {}
   resolve 函数: 内部定义成功时我们调用的函数 value => {}
   reject 函数: 内部定义失败时我们调用的函数 reason => {}
   说明: excutor 会在 Promise 内部立即同步回调,异步操作在执行器中执行
2. Promise.prototype.then 方法: (onResolved, onRejected) => {}
   onResolved 函数: 成功的回调函数 (value) => {}
   onRejected 函数: 失败的回调函数 (reason) => {}
   说明: 指定用于得到成功 value 的成功回调和用于得到失败 reason 的失败回调
   返回一个新的 promise 对象
3. Promise.prototype.catch 方法: (onRejected) => {}
   onRejected 函数: 失败的回调函数 (reason) => {}
   说明: then()的语法糖, 相当于: then(undefined, onRejected)
4. Promise.resolve 方法: (value) => {}
   value: 成功的数据或 promise 对象
   说明: 返回一个成功/失败的 promise 对象
5. Promise.reject 方法: (reason) => {}
   reason: 失败的原因
   说明: 返回一个失败的 promise 对象
6. Promise.all 方法: (promises) => {}
   promises: 包含 n 个 promise 的数组
   说明: 返回一个新的 promise, 只有所有的 promise 都成功才成功, 只要有一
   个失败了就直接失败
7. Promise.race 方法: (promises) => {}
   promises: 包含 n 个 promise 的数组
   说明: 返回一个新的 promise, 第一个完成的 promise 的结果状态就是最终的
   结果状态