在上一篇Promise文章中我们学习了promisse的基本知识后，下一步就是promise如何使用呢？

根据老湿从业8年的经验。将promise在项目中的使用总结如下几项：

1. 使用promise对axios进行二次封装

axios本身就是使用promise封装的http库，为什么还要对它进行二次封装呢？在一个项目中我们肯定要使用很多接口，每个接口主要是.get()或者.post()请求，所以我们就要自己手动封装一个全局的Axios网络模块，这样的话就既方便也会使代码量不那么冗余。

步骤1.给axios设置请求拦截，响应拦截。

//请求拦截
axios.interceptors.request.use(
  config => {
    if(localStorage.eleToken){ //如果我的eleToken存在
      // 设置统一的请求header
      config.headers.Authorization = localStorage.eleToken //授权
    }
    return config;
  },
  error => {
    return Promise.reject(error);
  }
);

//响应拦截
axios.interceptors.response.use(
  response => {
    return response;
  },
  error => {
    // 判断返回状态是不是401，如果是401代表当前的eleToke以及失效，需要移除localStorage里面的eleToken
    let {status} = error.response //获取错误状态码
    if(status == 401){
      message.error("当前登录(eleToken)已失效，请重新登录")
      localStorage.removeItem("eleToken")//清除eleToken
      this.router.push("/Login")//让用户从新回到登录页面
    }
    return Promise.resolve(error.response);
  }
);

步骤2.使用promise封装get(),post()请求。

get:

export function get(url,params){
	return new Promise((resolve,reject) => {
		axios.get(url,{
			params : params
		}).then(res => {
			resolve(res)
		}).catch(err => {
			reject(err)
		})
	})
}

post

export function post(url,params){
	return new Promise((resolve,reject) => {
		axios.post(url,params)
		.then(res => {
			resolve(res.data)
		})
		.catch(err => {
			reject(err.data)
		})
	})
}

步骤3：在组件中引入封装好的get,post

import {get,post} from '../http/http.js'

mounted() {

get('api/app/banner').then(res=>{
this.banner=res.data.banner;
})
post('api/app/getTel',{
	//这里用的是params传参，直接写{}就可，不用再声明params啦
	mobile : 18567391972,
	sms_type : 'login'
	}).then(res=>{
      this.list=res.data.list;
})
}

2. promise封装ajax

Ajax创建步骤：

• 创建XMLHttpRequest对象。
• open()方法创建一个新的HTTP请求，并指定该HTTP请求的方法、URL及验证信息。
• onreadystatechange()方法设置响应HTTP请求状态变化的函数。
• send()添加请求参数，发送HTTP请求。
• 获取异步调用返回的数据。
• 使用JavaScript和DOM实现局部刷新。

var url = '/请求的路径';
var params = {
    id: 'id=123',
    limit: 'limit=10'
};

// 封装一个get请求的方法
function getJSON(url) {
    return new Promise(function (resolve, reject) {
        var XHR = XMLHttpRequest ? new XMLHttpRequest() : new window.ActiveXObject('Microsoft.XMLHTTP');

        XHR.onreadystatechange = function () {
            //readyState属性表示请求/响应过程的当前活动阶段。
            if (XHR.readyState == 4) {
                if ((XHR.status >= 200 && XHR.status < 300) || XHR.status == 304) {
                    try {
                        //获取数据
                        var response = JSON.parse(XHR.responseText);
                        resolve(response);
                    } catch (e) {
                        reject(e);
                    }
                } else {
                    reject(new Error("Request was unsuccessful: " + XHR.statusText));
                }
            }
        }
        XHR.open('GET', url + '?' + params.join('&'), true);
        XHR.send(null);
    })
}

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

readyState
0 - 代表未初始化。 还没有调用 open 方法
1 - 代表正在加载。 open 方法已被调用，但 send 方法还没有被调用
2 - 代表已加载完毕。send 已被调用。请求已经开始
3 - 代表正在与服务器交互中。服务器正在解析响应内容
4 - 代表完成。响应发送完毕

3. promise封装wx.request（在微信小程序开发中使用）

请看我另一篇博客使用promise封装wx.request()

4. promise封装uni.reqest （在uni-app开发中使用）

请看我另一篇博客promise封装uni.reqest