Promise理解-个人解析

Promise的含义

Promise 是异步编程的一种解决方案。
它由社区最早提出和实现，ES6将其写进了语言标准，统一了语法，原生提供了Promise
个人理解
一个js原生对象，为了使代码更易读，避免回调嵌套。以同步编程的形式来解决异步编程

promise实现原理

promise雏形

function Promise(fn) {
  var value = null,
    callbacks = [];  //callbacks为数组，因为可能同时有很多个回调

  this.then = function (onFulfilled) { //onFulfilled，then(要注册的回调)
    callbacks.push(onFulfilled);
    return this;    //实现链式调用
  };

  function resolve(value) {
    callbacks.forEach(function (callback) {
      callback(value);
    });
  }

  fn(resolve);  //当一步操作执行成功后，用户会调用resolve方法,真正执行的操作是将callbacks队列中的回调一一执行
}

function getUserId() {
  return new Promise(function (resolve) {
    resolve(9876);
  });
}
getUserId().then(function (id) {
  // 一些处理
});

加入延时机制

function resolve(value) {
  setTimeout(function() {
    callbacks.forEach(function (callback) {
      callback(value);
    });
  }, 0)
} 

Promises/A+规范明确要求回调需要通过异步方式执行，用以保证一致可靠的执行顺序
通过setTimeout机制，将resolve中执行回调的逻辑放置到JS任务队列末尾

问题：Promise异步操作成功这之后调用的then注册的回调就再也不会执行,如何解决？

状态机制

Promises/A+规范中的2.1Promise States中明确规定了，pending可以转化为fulfilled或rejected并且只能转化一次

image.png

function Promise(fn) {
  var state = 'pending',
    value = null,
    callbacks = [];

  this.then = function (onFulfilled) {
    if (state === 'pending') {
      callbacks.push(onFulfilled);
      return this;
    }
    onFulfilled(value);
    return this;
  };

  function resolve(newValue) {
    value = newValue;
    state = 'fulfilled';
    setTimeout(function () {
      callbacks.forEach(function (callback) {
        callback(value);
      });
    }, 0);
  }
  fn(resolve);
}

三种状态

1.pending:等待
2.fulfilled:执行
3.rejected:失败

image.png

状态改变

Promise对象的状态改变只有两种可能：
1.pending ——> fulfilled
2.pending ——> rejected

// 方法1
    let promise = new Promise ( (resolve, reject) => {
        if ( success ) {
            resolve(res) // pending ——> resolved 参数将传递给对应的回调方法
        } else {
            reject(err) // pending ——> rejectd
        }
    } )

// 方法2
    function promise () {
        return new Promise ( function (resolve, reject) {
            if ( success ) {
                resolve(res)
            } else {
                reject(err)
            }
        } )
    }

Then方法

Promise对象中的then方法，可以接收构造函数中处理的状态变化，并分别对应执行。then方法有2个参数，第一个函数接收resolved状态的执行，第二个参数接收reject状态的执行

myFirstPromise.then(
    (successMessage) => {
        // successMessage is whatever we passed in the resolve(...) function above.
        // It doesn't have to be a string, but if it is only a succeed message, it probably will be.
        console.log(“这是resolve的结果! " + successMessage);
    },
    (errorMessage) => {
        // successMessage is whatever we passed in the resolve(...) function above.
        // It doesn't have to be a string, but if it is only a succeed message, it probably will be.
        console.log("这是reject的结果!! " + errorMessage);
    });

then方法的执行结果也会返回一个Promise对象。因此我们可以进行then的链式执行，这也是解决回调地狱的主要方式。

myFirstPromise
    .then((successMessage) => {
       console.log(successMessage);
    })
    .then(null,(errorMessage) => {
        console.log(errorMessage);
    });

then(null,()=>{})等同于catch(()=>{})

myFirstPromise
    .then((successMessage) => {
       console.log("这是! " + successMessage);
    })
    .catch((successMessage) => {
        console.log("这是! " + successMessage);
    });

promise简单封装一个get请求

var url = ‘https://promise.com/case';

// 封装一个get请求的方法
function getJSON(url) {
    return new Promise(function(resolve, reject) {
        var XHR = new XMLHttpRequest();
        XHR.open('GET', url, true);
        XHR.send();

        XHR.onreadystatechange = function() {
            if (XHR.readyState == 4) {
                if (XHR.status == 200) {
                    try {
                        var response = JSON.parse(XHR.responseText);
                        resolve(response);
                    } catch (e) {
                        reject(e);
                    }
                } else {
                    reject(new Error(XHR.statusText));
                }
            }
        }
    })
}

getJSON(url).then(resp => console.log(resp)).catch(err => console.log(err));

两个常用的用promoise封装的XMLHttpRequest库

fetch

fetch优点

1.符合关注分离，没有将输入、输出和用事件来跟踪的状态混杂在一个对象里
2.更好更方便的写法
3.更加底层，提供的API丰富（request, response）
4.脱离了XHR，是ES规范里新的实现方式

fetch缺点

1.fetchtch只对网络请求报错，对400，500都当做成功的请求，需要封装去处理
2.fetch默认不会带cookie，需要添加配置项
3.fetch不支持abort，不支持超时控制，使用setTimeout及4.Promise.reject的实现的超时控制并不能阻止请求过程继续在后台运行，造成了量的浪费
5.fetch没有办法原生监测请求的进度，而XHR可以
case:

const options = {
    method:"get",  //HTTP请求方法，默认为GET
    body:"请求参数",  //HTTP的请求参数
    headers:{},  //HTTP的请求头，默认为{}
    credentials:"omit"  //凭证，默认为omit,忽略的意思，也就是不带cookie;
};
const url = 'http://localhost/flowers.jpg';
fetch(url, options).then((response) => {
    // handle HTTP response
}, (error) => {
    // handle network error
})

Axios

axios的优点

1.从 node.js 创建 http 请求
2.支持 Promise API
3.客户端支持防止CSRF
4.提供了一些并发请求的接口（重要，方便了很多的操作）

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
})
    .then((response) => {
        console.log(response);
    })
    .catch((error) => {
        console.log(error);
    });

暂未发现axios缺点，个人推荐使用。