基于axios的二次封装

1、 axios的封装前言

axios是一个基于 promise 的 HTTP 库，目前,在vue,react框架中也还是备受青睐,根据不同项目的业务，也有许多种不同的封装方法,但不同的应用场景,导致封装的代码风格不一，我这里想总结下封装的思路。

2、 目录结构

src目录下,http.js文件是对axios的封装,依赖的一些包和方法,下面也会有具体介绍

3、 封装的基本思路

import axios from 'axios'
import NProgress from 'nprogress';
import 'nprogress/nprogress.css';
import store from './store';
import { formData } from '@/function'

axios.defaults.timeout = 20000;                        //响应时间
axios.defaults.headers.post[ 'Content-Type' ] = 'application/x-www-form-urlencoded;charset=UTF-8';        //配置请求头

//POST传参序列化(添加请求拦截器)
axios.interceptors.request.use ( ( config ) => {
    //在发送请求之前做某件事
    NProgress.start ();
    let token = store.state.userInfo.userToken
    config.headers.Authorization = `${token ? token : ''}`
    return config;
} , ( error ) => {
    NProgress.done ();
    return Promise.reject ( error );
} );

//返回状态判断(添加响应拦截器)
axios.interceptors.response.use ( ( res ) => {
    //对响应数据做些事
    NProgress.done ();
    return Promise.resolve ( res.data );
} , ( error ) => {
    NProgress.done ();
    return Promise.reject ( error );
} );

我是把后台的token存在vuex里面,当然这会使得刷新的时候数据消失,所以结合本地存储做了对应的处理,大家可以根据自己的需求做相应的存储.

在全局的请求拦截器中做了loading,和request header的配置

对应的响应拦截中也可以对response进行处理,根据后台返回不同的状态码做不同的处理,页面中的axios就只用处理返回正确的请求.

根据业务需求,我这里对get和post做了不同的处理

post请求

//返回一个Promise(发送post请求)
export function fetchPost ( url , params , form ) {
    let reqTime = new Date ().getTime ();
    if ( params ) {
        params.reqTime = reqTime;
    } else {
        params = { reqTime }
    }
    if ( form ) {
        params = formData ( params );
    }
    return new Promise ( ( resolve , reject ) => {
        axios.post ( url , params )
            .then ( response => {
                resolve ( response );
            } , err => {
                reject ( err );
                mes ();
            } )
            .catch ( ( error ) => {
                reject ( error )
                mes ();
            } )
    } )
}

由于post请求,后台有时候会要求传formData格式的参数,本文中默认是json格式,所以在此也做了处理,上述也可以看到,如果是fromData格式,可以传第三个参数为true,文中用到的formData方法和mes方法

export function formData(item) {
    //转换成表单
    let form = new FormData();
    for (let key in item) {
        form.append(key, item[key]);
    }
    return form;
}

function mes () {
    ELEMENT.Message ( {
        message : store.state.language.serveError , //这是我项目中的消息提示,可以自由更改
        type : "error" ,
        duration : 3000 ,
        customClass : "messageBox"
    } );
}

get请求

返回一个Promise(发送get请求)
export function fetchGet ( url , param , form ) {
    let reqTime = new Date ().getTime ();
    if ( param ) {
        param.reqTime = reqTime;
    } else {
        param = { reqTime }
    }
    if ( form ) {
        param = formData ( param );
    }
    return new Promise ( ( resolve , reject ) => {
        axios.get ( url , { params : param } )
            .then ( response => {
                resolve ( response )
            } , err => {
                reject ( err )
                mes ();
            } )
            .catch ( ( error ) => {
                reject ( error )
                mes ();
            } )
    } )
}

最后暴露出去这两个方法,在main.js中引入

export default {
    fetchPost ,
    fetchGet ,
}

//main.js
import { fetchPost, fetchGet } from './http';
Vue.prototype.$Post = fetchPost;
Vue.prototype.$Get = fetchGet;

在myminxin.js中使用这两个方法

let m = {
    data () {
        return {
            h : "http://localhost:5233"//全局请求地址
        };
    } ,
    } ,

  post ( u , p , f  ) {
      let that = this;
            return new Promise ( ( resolve , reject ) => {
                this.$Post ( this.h + u , p , f ).then ( res => {
                    that.backRequest ( u , res , ts );
                    resolve ( res )
                } ).catch ( ( e ) => {
                    reject ( e )
                } );
            } );
        } ,

 get ( u , p , f ) {
            let that = this;
            return new Promise ( ( resolve , reject ) => {
                this.$Get ( this.h + u , p , f ).then ( res => {
                    resolve ( res )
                } ).catch ( ( e ) => {
                    reject ( e )
                } );
            } );
        } ,      

myminxin也需要在项目中引入,可以全局在main.js中引入,也可以按需导入,大家也可以在对应的错误回调里做一些提示信息之类的,根据不同的需求自由发挥,借助组件库的消息提示,进行封装,

到此,axios的封装已经全部完毕,在项目中我们就可以很愉快的使用this调用get和post请求了,感谢大家观看,mua~

附言:

基于vue+element 的后台管理框架

GitHub: https://github.com/wxyfc/management-system

网址: https://wxyfc.github.io/management-system/#/login，账号:admin 密码:admin 直接点击登录即可

如果对您有帮助请点个小星星哦,谢谢,mua~