ES6 Promise

Promise

promise对象从语法上来看呢，是一个构造函数，用来生成Promise实例，用来封装异步操作，并提供成功后或失败后的结果
所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果

Promise对象有以下两个特点。
1 . 对象的状态不受外界影响
Promise对象代表一个异步操作，有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。这也是Promise这个名字的由来，它的英语意思就是“承诺”
2 . 一旦状态改变，就不会再变，任何时候都可以得到这个结果
Promise对象的状态改变，只有两种可能：从pending变为fulfilled 和从 pending变为rejected。只要这两种情况发生，状态就凝固了，不会再变了，会一直保持这个结果

最基础的promise语法

const promise = new Promise(function(resolve, reject) {
  // ... some code

  if (/* 异步操作成功 */){
    resolve(value);
  } else {
    reject(error);
  }
});

用promise做一个简单的ajax异步请求
当promise 执行resolve函数时，promise 的状态就会由pending（进行中）变成 fulfilled（ 已成功 ），紧接着就会调用then里定义的第一个方法
当promise 执行reject函数时，promise 的状态就会由pending（进行中）变成 rejected（ 已失败 ），紧接着就会调用then里定义的第二个方法

// 实例化Promise对象
const promise = new Promise(function (resolve, reject) {
    // 实例化XMLHttpRequest对象
    var xhr = new XMLHttpRequest();
    // 初始化网络请求
    xhr.open("GET", "https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata")
    // 发送请求
    xhr.send();
    // 设置处理返回结果的回调函数
    xhr.onreadystatechange = function () {
        if (xhr.status === 200 && xhr.readyState === 4) {
            // 如果成功则调用resolve()方法
            resolve(xhr.response);
        } else {
            // 如果失败则调用reject()方法
            reject(xhr.response);
        }
    };
})
// promise异步操作无论是成功还是失败，都可以调用.then方法
// .then方法中是对resolve函数和reject函数的详细处理代码
promise.then(function (result) {
    console.log(result)
}, function (error) {
    console.log(error)
})

一般使用ES6的箭头函数

const promise = new Promise((resolve, reject) => {
    var xhr = new XMLHttpRequest();
    console.log(xhr)
    xhr.open("GET", "https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata")
    xhr.send();
    xhr.onreadystatechange = function () {
        if (xhr.status === 200 && xhr.readyState === 4) {
            resolve(xhr.response);
        } else {
            reject(xhr.response);
        }
    };
})
promise.then((result) => {
    console.log(result)
}, (error) => {
    console.log(error)
})

切记，promise本身是同步的，他的 .then 方法才是异步的，.then方法不会进入主线程，而是进入任务队列
.then就是promise的一个回调函数

let promise = new Promise(function (resolve, reject) {
    console.log('1');
    resolve();
});

promise.then(function () {
    console.log('2');
});

console.log('3');
// 输出 1 3 2

为什么要用Promise

我们在异步调用时经常会遇到"后一个异步调用的参数是前一个异步调用的结果"的情况，这样使用.then的链式形式，可以很好的规避回调地狱的情况

promise的本质是一个容器，一个包裹异步操作方便程序员对异步任务书写和管理的容器，抛开异步任务写promise就是耍流氓