实现一个简单的axios封装

简单实现axios封装

1.创建生产环境地址 （本机地址）

.env.development文件
VUE_APP_BASE_URL='/api'

创建开发环境地址（java后台地址）

.env.production文件
VUE_APP_BASE_URL='http://106.14.26.32:8080/api'

2.在Axios代理处判断环境，进行相关的操作

module.exports = {
     
    publicPath: process.env.NODE_ENV === 'production' ? './' : '/',
    devServer: {
     
        //代理
        proxy: {
     
            // 拦截请求接口，判断是不是/api开头的，如果是，是使用代理服务器。
            '/api': {
     
                target: 'http://106.14.26.32:8080',  //这里是目标服务器地址
                changeOrigin: true,
                // ws: true,
                pathRewrite: {
     
                    '^/api': ''       //这里一定要为空
                }
            }
        }
    }
}

3.在store里面添加文件，用来封装axios

import axios from 'axios';
import router from '../router/index'
let  baseUrl = process.env.NODE_ENV === 'development' ? process.env.VUE_APP_BASE_URL : process.env.VUE_APP_BASE_URL;
console.log(baseUrl)
let http = axios.create({
     
    timeout: 10000,
    baseURL: baseUrl
    // ,
    //     // headers:{
     
    //     //     'Content-Type':'application/json'
    //     // }
});
// 拦截前
http.interceptors.request.use(req=>{
     
    // console.log('请求前');
    let token = sessionStorage.getItem('token');
    token && (req.headers['authenticate'] = token);
    return req
},error=>Promise.reject(error));
//响应后干什么
http.interceptors.response.use(resp=>{
     
    //比如可以将后台给我们token 存起来
    // 直接把拦截器放到main.js中，多一个.data
    // resp.data.data.token && sessionStorage.setItem('token',resp.data.data.token);
    //封装在HTTP.JS中，就少写一个.data;
    resp.data.token && sessionStorage.setItem('token',resp.data.token);
    return resp
},error=>{
     
    let _resp = error.response;
    switch (_resp.status) {
     
        case 401 :
            //把本地的token清除  跳转到login
            sessionStorage.removeItem('token')
            // sessionStorage.removeItem('userName')
            // sessionStorage.removeItem('type')
            // alert('身份已过期,请重新登录')
            return router.push('/login')  // 跳转到登录页面；
    }
    return Promise.reject(error.response.data)
});

export default http

4.main.js需要修改，要拿到实例

import http from './store/http.js';
Vue.prototype.$axios = http;

5.在使用后台接口时就不需要在写/api了