JavaScript Promise 异步编程详解与实战

什么是 Promise

Promise 是 JS 中进行异步编程的新解决方案

从语法上来说: Promise 是一个构造函数
从功能上来说: Promise 对象用来封装一个异步操作并可以获取其成功/失败的结果值

promise 的状态改变

pending 变为 resolved
pending 变为 rejected

promise 状态改变的结果只有这 2 种, 且一个 promise 对象只能改变一次无论变为成功还是失败, 都会有一个结果数据，成功的结果数据一般称为 value, 失败的结果数据一般称为 reason

Promise 的基本流程与基本使用

使用 promise 封装 ajax 异步请求

function sendAJAX(url) {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.responseType = 'json';
    xhr.open('GET', url);
    xhr.send();
    //处理结果
    xhr.onreadystatechange = function () {
      if (xhr.readyState === 4) {
        //判断成功
        if (xhr.status >= 200 && xhr.status < 300) {
          //成功的结果
          resolve(xhr.response);
        } else {
          reject(xhr.status);
        }
      }
    };
  });
}

sendAJAX('https://api.apiopen.top/api/getImages?page=0&size=10').then(
  value => {
    console.log(value);
  },
  reason => {
    console.warn(reason);
  },
);

为什么要用 Promise

指定回调函数的方式更加灵活
- 旧的: 必须在启动异步任务前指定
- promise: 启动异步任务 => 返回 promie 对象 => 给 promise 对象绑定回调函数(甚至可以在异步任务结束后指定/多个)
支持链式调用, 可以解决回调地狱问题（终极解决方案：async/await）