Vue对axios的封装及使用

概要

封装axios让调用接口变得轻量、简单

先安装 axios通过npm 或者 yarn 安装 axios

1、通过npm安装axios

npm install axios

2、在主入口文件main.js中引用

import axios from 'axios'
 
Vue.use(axios);

3、创建文件夹http,再创建文件index.js进行封装

配置请求拦截器和响应拦截器,请求前缀等

import axios from "axios";


const http = axios.create({
    // baseURL 将自动加在 url`前面，除非 url 是一个绝对 URL。
    // 它可以通过设置一个 baseURL 便于为 axios 实例的方法传递相对 URL
    baseURL: "/api",
    // timeout设置一个请求超时时间，如果请求时间超过了timeout，请求将被中断，单位为毫秒（ms）
    timeout: 6000,
    // headers是被发送的自定义请求头，请求头内容需要根据后端要求去设置，这里我们使用本项目请求头。
    headers: {
        'X-Custom-Header': 'foobar',
        'Accept': 'application/json',
        'Content-Type': 'application/json'
    }
})

// 添加请求拦截器
http.interceptors.request.use(function (config) {

    const token = localStorage.getItem("Web-Token-stu")
    if (token) {
        config.headers["token"] = token// 请求头带上token
    }
    // get请求映射params参数
    if (config.method === 'get' && config.params) {
        let url = config.url + '?';
        for (const propName of Object.keys(config.params)) {
            const value = config.params[propName];
            var part = encodeURIComponent(propName) + "=";
            if (value !== null && typeof (value) !== "undefined") {
                if (typeof value === 'object') {
                    for (const key of Object.keys(value)) {
                        if (value[key] !== null && typeof (value[key]) !== 'undefined') {
                            let params = propName + '[' + key + ']';
                            let subPart = encodeURIComponent(params) + '=';
                            url += subPart + encodeURIComponent(value[key]) + '&';
                        }
                    }
                } else {
                    url += part + encodeURIComponent(value) + "&";
                }
            }
        }
        url = url.slice(0, -1);
        config.params = {};
        config.url = url;
    }
    // 在发送请求之前做些什么
    return config;
}, function (error) {
    // 对请求错误做些什么
    console.log("请求拦截器错误：", error)
    return Promise.reject(error);
});

// 添加响应拦截器
http.interceptors.response.use(function (response) {
    // 2xx 范围内的状态码都会触发该函数。
    // 对响应数据做点什么
    return response.data;
}, function (error) {
    // 超出 2xx 范围的状态码都会触发该函数。
    // 对响应错误做点什么
    console.log("响应拦截器错误：", error)
    return Promise.reject(error);
});

/**
 * 对外暴露封装的axios
 * @param requestMode 请求方式
 * @param url 后端url
 * @param data 形参
 */
export default http

4、对封装的axios的接口的统一管理

创建api目录,创建index.js文件

引入刚刚封装的http文件

import http from "@/http";

// 测试导出
export function exportExcelFile() {
  return http({
   	url: "/plan/test",
    method: "post",
    responseType: 'blob',
    data: data,
  })
}

5、代码种对接口的调用

import exportExcelFile from "@/api/exportExcelFile"

exportExcelFile().then(res=>{
		res.XXXX
})

本文要是对你有帮助的话，麻烦帮忙一键三联，关注下，谢谢。