JavaScript全家桶之Promise 封装ajax，axios，fetch

Promise 简述
1、Promise 是一种异步的解决方案
2、分为三个状态，进行中，已成功（resolve），已失败（rejected）
三种状态:
pending：进行中
fulfilled :已经成功
rejected 已经失败
3、两种结果，从进行中到已成功，或者是从进行中到已失败
从pending变为fulfilled
从pending变为rejected。
4、Promise可以解决回调地狱问题，
何为回调地狱？
也就是ajax在请求数据的时候，一个数据被请求下来的时候又继续请求第二个数据，这时这个数据跟上一个数据有关联，那么ajax会一直嵌套下去，这时就会产生回调地狱问题

Promise封装ajax

一开始呢我是将Promise封装ajax分为get和post的两种方法
post

function post(url,data) {
    return new Promise((resolve, reject) => {
        let ajax=new XMLHttpRequest();
        ajax.open("POST",url);
        ajax.onreadystatechange=function () {
            if(ajax.readyState===4){
                if(ajax.status===200){

                    resolve(JSON.parse(ajax.responseText),this)
                }else {
                    var res={status:this.status,data:JSON.parse(this.response)}
                    reject(response,this)
                    return res
                }
            }
        }
        ajax.send(JSON.stringify(data))
    });
}

get

function get(url,data) {
    return new Promise((resolve, reject) => {
        let ajax=new XMLHttpRequest();
        ajax.open("GET",url);
        ajax.onreadystatechange=function () {
            if(ajax.readyState===4){
                if(ajax.status===200){

                    resolve(JSON.parse(ajax.responseText),this)
                }else {
                    var res={status:this.status,data:JSON.parse(this.response)}
                    reject(response,this)
                    return res
                }
            }
        }
        ajax.send(JSON.stringify(data))
    });
}

写完之后发现这两个方法除了请求方式不一样其他的都一样,于是我就讲他俩合并成了一个

function M-axios(type,url,data) {
    return new Promise((resolve, reject) => {
        let ajax=new XMLHttpRequest();
        ajax.open(type,url);
        ajax.onreadystatechange=function () {
            if(ajax.readyState===4){
                if(ajax.status===200){

                    resolve(JSON.parse(ajax.responseText),this)
                }else {
                    var res={status:this.status,data:JSON.parse(this.response)}
                    reject(response,this)
                    return res
                }
            }
        }
        ajax.send(JSON.stringify(data))
    });
}

好了以上代码就是promise封装ajax

二次封装fetch

//引入fetch
import "whatwg-fetch"

function http(url) {
    return new Promise((resolve, reject) => {
        fetch(url).then(res => {
            return res.json();
        }).then(data => {
            resolve(data)
        }).catch(err => {
            //捕获异常
            console.log(err.msg);
            reject(err);
        })
    });
}
//将函数曝光出去
export default http

二次封装axios

import axios from 'axios'
function https(url,method,obj) {
  return new Promise(function (resolve,reject) {
    axios({
      method:method,//请求类型
      url:url,//请求地址
      params:obj//传递的参数
    }).then((res)=>{
      resolve(res)
    }).catch((err)=>{
      reject(err)
    })
  })
}
export default https