实现一个简单的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了

©️2020 CSDN 皮肤主题: 深蓝海洋 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值