vue+axios二次封装请求后端接口、模块、导入导出、parseInt、、stringify、Promise、createObjectURL、default、import、export、as

---

前言

二次封装axios和api，新建名为request文件夹，在文件夹中新建两个名为http和api的js文件，文件夹名称和文件名自定义，不属于硬性要求，只是文件夹的位置一定要在src根目录下，并且src是其直接父级。在使用过程中不一定都要通过api文件来请求数据，api文件只是统一接口，不是请求的出口，而axios才是请求的最终出口。可以直接引用二次封装的axios，也可以直接使用原始的axios。这里的封装是为了解决统一性，也使得整个项目更简洁，杜绝到处出现后端接口地址的现象。

---

1、http文件内容

注释

本次封装的axios用在vue2中，所以特别需要注意axios、qs和element-ui的版本。

---

安装axios

npm install axios@0.21.1 --save

cnpm install axios@0.21.1 --S

yarn add axios@0.21.1

---

安装qs

npm install qs@6.5.3 --save

cnpm install qs@6.5.3 --S

yarn add qs@6.5.3

---

安装element-ui

npm install element-ui@2.15.12 --save

cnpm install element-ui@2.15.12 --S

yarn add element-ui@2.15.12

---

代码

// ^0.21.1
import axios from 'axios';
// ^6.5.3
import qs from 'qs';
// ^2.15.12
import { Message } from 'element-ui';

// 创建axios实例
const request = axios.create({
    // 后端服务器地址
    baseURL: 'url',
    // 请求超时时间
    timeout: 2000
});

// 响应错误码封装
function errorMsg(status, msg) {
    status = parseInt(status);

    let result = '';

    switch (status) {
        case 400:
            result = msg ? msg : '请求错误';
            break
        case 404:
            result = msg ? msg : `请求地址出错`;
            break
        case 500:
            result = msg ? msg : '服务器内部错误';
            break
        case 503:
            result = msg ? msg : '服务不可用';
            break
        default:
            result = msg;
    }

    return result;
}

// request拦截器
request.interceptors.request.use(config => {
    // 配置所需请求投
    config.headers['Authorization'] = "token";
    config.headers['Access-Control-Allow-Origin'] = '*';

    if (config.method === 'post') {
        // post 请求
        config.headers["content-type"] = "application/x-www-form-urlencoded";
        // 序列化，比如表单数据
        config.params = qs.stringify({ ...config.params });
    } else {
        // 默认类型(get)
        config.headers["content-type"] = "application/json";
        config.params = { ...config.params };
    }

    return config;
},
    error => {
        return Promise.reject(error);
    }
);

// response拦截器（响应需求可以和后端沟通配合修改）
request.interceptors.response.use(
    response => {
        // 此处可以设置公共提示
        // 但目前项目的数据返回结构与方式不统一
        // 所以无法做全局提示
        return response;
    },
    error => {
        // 响应失败，提示失败内容
        if (error && error.response) Message({
            message: errorMsg(error.response.status, error.response.message),
            type: 'error',
            duration: 3 * 1000
        });

        return Promise.reject(error);
    }
);

export default request;

---

2、app.js文件

import { default as request } from './http.js';

// 登录
const postLogin = (data) => request.post('/api/login', data);

// 获取验证码
const getVerificationCode = (params) => request.get('/api/code', params);

// 导出方式二
export {
    postLogin,
    getVerificationCode
};

// 导出方式一
export default {
    postLogin,
    getVerificationCode
};

---

3、main.js文件

// 引入http
import { default as axios } from '@/request/http.js';
// 引入api
import api from '@/request/api.js';

// 挂载api到vue原型
Vue.prototype.$api = api;
// 挂载http到vue原型
Vue.prototype.$axios= request;

---

4、使用

4.1、get请求

请求的时候传递responseType: 'blob'属性及值是为了把图片流转为正常的图片格式。

---

全局挂载，通过axios文件使用

this.$axios
    .get("api/code", { params: {}, responseType: "blob" })
    .then(({ data }) => {
        this.VCode = window.URL.createObjectURL(data);
    })
    .catch(function (error) {
        console.log("获取验证码失败: ", error);
    });

☺☺☺

直接使用axios
需要在全局引入并挂载到vue原型上
import { default as request } from '@/request/http';
Vue.prototype.$axios = request;
需要在.vue中写路径
.vue文件里面不需要引入api文件
http文件的导出方式为 export default request;

---

单页面引入，通过api文件使用

import { getVerificationCode } from '@/request/api.js;

getVerificationCode({ params: {}, responseType: "blob" })
    .then(({ data }) => {
        this.VCode = window.URL.createObjectURL(data);
    })
    .catch((error) => {
        console.log("获取验证码失败: ", error);
    });

☺☺☺

需要在api文件中定义好路径
需要在.vue文件中引入api文件
import { getVerificationCode } from '@/request/api.js;'
api文件的导出方式为 export { getVerificationCode };

---

全局挂载，通过api文件使用

this.$api
    .getVerificationCode({ params: {}, responseType: "blob" })
    .then(({ data }) => {
        this.VCode = window.URL.createObjectURL(data);
    })
    .catch((error) => {
        console.log("获取验证码失败: ", error);
    });

☺☺☺

需要在api文件中定义好路径
不需要引入api文件
api文件的导出方式为 export default { getVerificationCode };
需要在全局引入挂载
import api from '@/request/api';
Vue.prototype.$api = api;

4.2、post请求

this.$api
    .postSurveillance({})
    .then(({ data }) => {
        console.log(data);
    })
    .catch((error) => {
        console.log("登陆失败: ", error);
    });

☺☺☺

post请求与get请求类似，传参的方式有所差异而已。