vuecli +elementui 封装axios

最新推荐文章于 2024-06-29 00:40:34 发布

方云寒暄

最新推荐文章于 2024-06-29 00:40:34 发布

阅读量256

点赞数

文章标签： elementui vue

本文链接：https://blog.csdn.net/qq_37062098/article/details/124118483

版权

不多说直接上代码，设置了全局的loading和访问失败的message提示，都是来自于elementui 2.xxx，大家根据自己的实际业务需求更改。token根据后端需求放在应该放的位置，本文中的token放在headers中。

import axios from 'axios'
import { Loading, Message } from 'element-ui';
import store from '../store';


const loading = {
    loadingInstance: null, // Loading 实例
    // 打开加载
    open: function () {
        // 创建实例,而且会打开加载 窗口
        // console.log(this.loadingInstance, 'loadingInstance')
        if(this.loadingInstance === null) {
            // 如果实例 为空，则创建
            // console.log('创建加载实例。。。')
            this.loadingInstance = Loading.service({
                target: '#app',
                text: '拼命加载中...',
                background: 'rgba(0, 0, 0, 0.5)'
             })
        }
       
    },
    // 关闭加载
    close: function () {
        // 不为空时, 则关闭加载窗口
        if(this.loadingInstance !== null) {
            this.loadingInstance.close()
        }
        this.loadingInstance = null
        
    }
}

//设置自定义axios的参数


const request = axios.create({
    baseURL: process.env.VUE_APP_BASE_API, 
    // baseURL: '/',
    timeout: 5000 ,// 请求超时，5000毫秒
});

// 请求拦截器
request.interceptors.request.use(config => {
    //token安全拦截
    if (store.state.userInfo.token) {
        config.headers['token'] = store.state.userInfo.token // 让每个请求携带自定义token 请根据实际情况自行修改
    }
    // 打开加载窗口
    loading.open()
    // config.headers['Content-Type'] = 'text/plain'
    return config
    // return config
}, error => {
    // 关闭加载窗口
    loading.close()
    // 出现异常
    return Promise.reject(error);
})

// 响应拦截器
request.interceptors.response.use(response =>{
    // 关闭加载窗口
    loading.close()
    const resp = response.data

    // 后台正常响应的状态，如果不是 2000， 说明后台处理有问题
    if(resp.code !== "0") {
        // Message({
        //     message: resp.message || '系统异常',
        //     type: 'warning',
        //     duration: 5 * 1000
        // })
    }

    // return response.data // 可以在这里统一的获取后台响应的数据进行返回，而这里面就没有请求头那些
    return response
}, error => {
    // 关闭加载窗口
    loading.close()
    console.log('response.error', error.response.status)
    Message({
        message: error.message,
        type: 'error',
        duration: 5 * 1000
    })
    return Promise.reject(error);
})

//  http://localhost:8888/dev-api/db.json 404
// request.get('/db.json').then(response => {
//     console.log(response.data)
// })

export default request // 导出自定义创建 axios 对象