Promise知多少

这是我参与更文挑战的第1天，活动详情查看：更文挑战

什么是Promise

Promise是一个对象，代表了一个异步操作的最终结果，成功或失败。有三种状态：pedding(进行中)，fulfilled（已成功）和rejected（已失败）

Promise是javaScript标准内置对象，并且es6规定，Promise对象是一个构造函数，这也就意味着我们可以通过new Promise来生成一个Promise的实例。

Promise对象的特点

1. 对象的状态不受外界影响。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。
2. 一旦状态改变，就不会再变，任何时候都可以得到这个结果。也就是说Promise对象的状态只能从pedding变成fulfilled，或者从pedding变成rejected。
3. Promise一旦新建就会立即执行，且无法中途取消。
4. Promise内部抛出的错误，不会反应到外部。如果需要反应到外部则需要设置回调函数。
5. 当处于pedding状态时，无法得知目前进展到哪一个阶段（刚刚开始还是即将完成）

Promise有什么用

Promise主要用来解决回调地狱的问题，就是说以前我们的多层嵌套的回调，可以改写成链式的.then去调用。代码会变得整洁，清晰。

promise怎么用

👀栗子：

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

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

Promise构造函数接收一个函数作为参数，而这个函数又接收两个参数，分别是成功的resolve函数和失败的reject函数。resolve和reject函数由js引擎提供。

实例生成之后可以调用then方法。指定resolved状态和rejected状态的回调函数。

promise.then(function(value) {
  // success
}, function(error) {
  // failure
});

那么，简单的js执行顺序的面试题就来了：

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

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

console.log('Hi!');

// Promise
// Hi!
// resolved

在上面的代码中，Promise新建后立即执行，所以会首先输出promise，然后在执行同步代码输出Hi！，在同步代码全部执行完毕之后，才会去执行then制定的回调函数，最后输出resolved。

• PS: 可以实现一个promise的ajax吗？ 实现思路简单整理如下：

1. 首先我们要知道发起一个网络请求应该是_ajax(url, params)这样子的，即必须有请求地址 请求参数(可选)
2. 而promise是可以链式的调用then方法的，那么要想链式调用then方法_ajax的返回值必须是一个promise对象 此时我们大体的架子已经有了

function _ajax(url, params){
    const promise = new Promise();
    return promise;
}

3. 接下来我们去丰富里边的内容：
4. new 一个promise，接收一个函数作为参数
5. 该函数接收两个参数，resolve和reject，它们是两个函数，由js引擎提供

function _ajax(url, params){
    function fn(resolve, reject){
        
    }
    const promise = new Promise(fn);
    return promise;
}

6. 接着创建xhr对象 即new XMLHttpRequest()
7. 然后绑定事件onreadystatechange 在xhr的readyState属性发生变化的时候做出处理
8. 接着.open()打开连接，同时设置请求方式，请求地址，以及是异步还是同步请求
9. 然后可以使用setRequestHeader(k, v)添加http请求头字段
10. 然后.send(params)发送请求

function _ajax(url, params){
    function fn(resolve, reject){
        const xhr = new XMLHttpRequest();
        const handleChange = function (){
          
        }
        xhr.onreadystatechange = handleChange;
        xhr.responseType = "json";
        xhr.setRequestHeader("Accept", 'application/json');
        xhr.open('POST', url);
        xhr.send(params);
    }
    const promise = new Promise(fn);
    return promise;
}

11. 总的基本完成了 那么再去详细的完善 事件处理函数onreadystatechange
12. readyState状态为:
    • 0: 尚未开始初始化，也没有调用open
    • 1: 此时调用了open但没有调用send
    • 2: 此时调用了send，但是服务器没有给出响应
    • 3: 此时正在接收服务器响应，但还没有接收完毕，此处一般不做任何处理
    • 4: 此时已经接收完了服务器的响应，可以对数据进行处理
13. status状态码为200的时候进行处理

function _ajax(url, params){
  params = JSON.stringify(params);
  function fn(resolve, reject){
    const xhr = new XMLHttpRequest();
    const handleChange = function (){
      if(this.status === 200 && this.readyState === 4){
        resolve(this.response)
      } else {
        reject(new Error(this.statusText))
      }
    }
    xhr.onreadystatechange = handleChange;
    xhr.responseType = "json";
    xhr.setRequestHeader("Accept", 'application/json');
    xhr.open('POST', url);
    xhr.send(params);
  }
  const promise = new Promise(fn);

  return promise;
} 

14. 至此，我们基于promise的ajax已经完成了
15. 完美！