前言

在vue项目中，和后台交互获取数据这块，我们通常使用的是axios库，它是基于promise的http库，可运行在浏览器端和node.js中。他有很多优秀的特性，例如拦截请求和响应、取消请求、转换json、客户端防御XSRF等。

下面就是前端小白对于axios的简单封装。

1.安装

npm install axios; // 安装axios

2.引入

一般我会在项目的src目录中，新建一个api文件夹，然后在里面新建一个api.js和一个request.js文件。api.js用来统一管理我们的接口，request.js文件用来封装axios。

3.封装

request.js中写对于axios的封装。首先引入axios、qs依赖，引入main.js主要是用于后面对接口进行统一处理，比如调接口的时候，显示loading等。

import axios from 'axios'
import qs from 'qs'
import ServerMixin from '@/mixin/ServerMixin'
export const doExec = (url, params, contentType, methods) => {
    let pstr = qs.stringify(params, { arrayFormat: 'brackets' })
    return axios({
            //设置请求的接口地址
            url: (methods && methods.toUpperCase()) !== 'GET' ? url : `${url}?${pstr}`,
            //params是添加到url的请求字符串中的，用于get请求
            params: null,
            //data是添加到请求体（body）中的， 用于post请求。java后台用qs转
            data: (contentType && contentType.toUpperCase()) === 'JSON' ? params : qs.stringify(params),
            //请求方法，默认GET
            method: methods || 'POST',
            //这里的请求头与后台商量设置
            headers: {
                // 'x-auth-token': getUserInfo() == undefined ? "" : getUserInfo().token
            }
        })
        .then((res) => {
            return res.data
        })
}

在api.js中引入doExec方法。

import { doExec } from '@/api/request'

const apiPrefix = window.apiPrefix

export const api = {
    // 用户
    user: {
        // 登录
        login(opts) {
            return doExec(`${apiPrefix}user/login`, opts)
        },
    }
}

axios实例创建好之后，开始使用request拦截器对axios请求配置做统一处理，具体如下：

//设置超时时间
axios.defaults.timeout = 10000;
//添加请求拦截器
axios.interceptors.request.use(config => {
    //此处可以自行设置Loadding
    return config
}, error => {
    return Promise.reject(error)
})

//添加响应拦截器
axios.interceptors.response.use(response => {
    if (response.data.code == 4) {
        ServerMixin.Event.$emit('login')
    }

    return response
}, error => {
    console.log(error.response.status)
    if (error.response !== undefined) {
        switch (error.response.status) {
            case 404:
                if (window.sessionStorage.getItem('out') === null) {
                    window.sessionStorage.setItem('out', 1)
                    MessageBox.confirm('登陆超时！', '提示', { confirmButtonText: '重新登录', cancelButtonText: '取消', type: 'warning' }).then(() => {
                        store.dispatch("logout")
                    }).catch(action => {
                        console.log(action)
                    })
                }
                //...其他状态码根据业务需求变更。
                break
            default:
                MessageBox.alert(`连接错误${error.response.status}`)
        }
        return Promise.resolve(error.response)
    }
    return Promise.reject(error)
})

4.调用

现在只需要在业务模块直接调用$api，调用对应方法即可：

export default {
    data() {
        return {
            form: {
                account: "admin",
                password: "admin"
            }
        };
    },
    methods: {
        login() {
            this.$api.user.login(this.form).then((res) => {
                console.log(res);
            })
        }
    }
};

Vue中axios的封装

前言

1.安装

2.引入

3.封装

4.调用