promise对axios二次封装、promise封装ajax、promise封装wx.request、promise封装uni.reqest

╰半橙微兮° 2022-12-20 01:24 370阅读 0赞

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

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

### 目录 ###

*   *  1. 使用promise对axios进行二次封装
     *  2. promise封装ajax
     *  3. promise封装wx.request（在微信小程序开发中使用）
     *  4. promise封装uni.reqest （在uni-app开发中使用）

## 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实现局部刷新。

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

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

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

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

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

[Promise]: https://blog.csdn.net/weixin_43638968/article/details/105258289
[promise_wx.request]: https://blog.csdn.net/weixin_43638968/article/details/108732834
[promise_uni.reqest]: https://blog.csdn.net/weixin_43638968/article/details/109024311