vue的请求封装

vue的请求封装

首先先安装axios
npm install --save axios
具体代码：

import axios from "axios"
import store from '../store'//引用vuex，用于添加请求头的token
import { baseUrl } from './env'
import { ElMessage, ElLoading } from 'element-plus'
//添加请求头
const instance = axios.create({
    baseURL: baseUrl,
    timeout: 40000,
    headers: {
        "Content-Type": "application/json"
    }
})
//请求拦截器
instance.interceptors.request.use(
    config => {
        if (store.state.token) {
            config.headers["Authorization"] = store.state.token
        }
        if (config.method.toLowerCase() === 'get') {
            config.headers["Cache-Control"] = 'no-cache';
            // 给data赋值以绕过if判断
            config.data = true
            config.params._resolveCache = (new Date).getTime()
        }
        return config
    },
    function (error) {
        return Promise.reject(error);
    }
)
// 响应拦截器
//统一错误管理
instance.interceptors.response.use(res => {
    if (res.config.responseType != "blob" && res.data && res.data.code != "200") {
        ElMessage({
            message: `${res.data.code}-${res.data.msg}`,
            type: "error",
        });
        //会中断后续所有操作（不会返回请求结果）
        res.error = true
    }
    return res
}, function (error) {
    return Promise.reject(error);
})
export default (
    url = "",
    data = {},
    type = "POST",
    responseType = "json",
    headers = {},
    options = {
        //接口显示loading
        loading: false,
        //即使错误也返回数据
        alwayResponse: false
    }
) => {
    return new Promise((resolve, reject) => {
        let loading;
        // 请求加loading
        if (options.loading) {
            loading = ElLoading.service({
                lock: false,
                text: 'Loading',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
            });
        }
        let httpPromise = null;
        if (type.toLowerCase() === "get") {
            httpPromise = instance({
                method: type,
                url: url,
                params: data,
                headers,
                responseType
            });
        } else {
            httpPromise = instance({
                method: type,
                url: url,
                data: data,
                headers,
                responseType
            });
        }
        httpPromise.then(
            res => {
                //请求成功
                if (!res.error || options.alwayResponse || res.config.responseType === 'blob') {
                    resolve(res.data)
                }
                if (options.loading) {
                    loading.close();
                }
            }
        ).catch(err=>{
            reject(err)
            if (options.loading) {
                loading.close();
            }
        })
    })
}

使用用例
在api里引用

import fetch from "../uilts/fetch";
export const login= (data) => fetch(`login`, data, 'post', undefined, undefined, { loading: true }); 

//全部引用
import * as Api from "@/api";
 Api.login().then(res=>{})
 //单个引用
 import {login} from "@/api";
 login().then(res=>{})