axios请求拦截和响应拦截封装+自动切换打包地址

在src下创建axios文件夹
在axios文件夹中添加api,js和config.js
config.js中

// 引入需要用到的资源,qs和element可以百度搜索怎么下载

import axios from "axios";
import qs from "qs";
import { Message, Loading } from 'element-ui'; // 主要用于提示，可以换成自己用的ui框架
let loadingInstance = null

/*
  自动更换请求地址
 */
 const server = {
    pro: "http://dev.xxx.com/api/",         //生产环境
    dev: "https://api.apiopen.top/",        //测试环境
    util: ""                                //其他环境
}   

const origin = location.hostname;
let DOMIN = '';

for (let i in server) {
    let item = server[i]
    if (item.indexOf(origin) > -1) {
        DOMIN = item
    }
}
if (!DOMIN) DOMIN = server.util ? server.util : server.dev

/*
  axios实例 
 */
const service = axios.create({
    baseURL: DOMIN,  
    timeout: 5000  // 请求超时时间
});

/*
  request拦截器 
 */
service.interceptors.request.use(config => {
    loadingInstance = Loading.service({
        lock: true,
        text: 'loading...',
        // background: 'rgba(255, 255, 255)'
    })
    config.method === 'post'
        ? config.data = qs.stringify({ ...config.data })
        : config.params = { ...config.params };
    config.headers['Content-Type'] = 'application/x-www-form-urlencoded';

    return config;
}, error => {  //请求错误处理

    loadingInstance.close()

    Message('请求错误')
    Promise.reject(error)
});

/* 
 respone拦截器 
*/
service.interceptors.response.use(
    response => { 

        loadingInstance.close()
        //这里根据后端提供的数据进行对应的处理
        console.log(response.data.code);
        if (response.data.code === 200) {
            return response.data;
        } else {
            console.log(response.data.msg);
        }
    },
    error => {  //响应错误处理
        loadingInstance.close()

        console.log('error');
        console.log(error);
        console.log(JSON.stringify(error));

        Message( '网络异常，请重试')



        

        return Promise.reject(error)
    }
);

// 最后把axios实例暴露出去

export default service;

在api.js里面

引入config,js

import service from './apiconfig';

// 封装请求方法

export default {

    install(Vue) {
        Vue.prototype.post = function (url, data) {
            return service({
                url: url,
                method: 'post',
                data
            })
        }
        Vue.prototype.get = function (url, data) {
            return service({
                url: url,
                method: 'get',
                params: data
            })
        }


    }
}

在main.js引入api,js，方法全局使用

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

在组件中请求

methods: {
       async getSce (){
           let res = await this.get('/getSingleJoke',{
               sid:'28654780'
           });
           this.list = res;
       }
    }

这样封装的好处就是不用单独在每次请求处理请求参数或者后台响应；提升了代码重用性，统一管理性；

axios请求拦截和响应拦截封装+自动切换打包地址

猜你喜欢