封装axios实现基础网路请求

封装axios.js

/** 封装axios基础网路请求 */
import axios from 'axios'   
 
const app = axios.create({ 
    baseURL: process.env.VUE_APP_BASE_API,
    timeout: 20000
})

app.defaults.headers['Content-Type'] =  "application/json"

app.interceptors.request.use(
    (config) => {
      let token = sessionStorage.getItem("token");
      if (token) {
        config.headers["Authorization"] = "Bearer " + token;
      }
      return config;
    },
    (error) => {
      console.log(error);
      return Promise.reject(error);
    }
  );
// Add a response interceptor
app.interceptors.response.use(function (response) {
// Do something with response data 
    let data = response.data;
    if(data.code == 0 || data.code == 200){
      return data.data;
    }  
    return Promise.reject(response);
}, function (error) {
// Do something with response error
    return Promise.reject(error);
});

export default app;

项目根目录下新建.env .env.development

.env内容

NODE_ENV=production 
VUE_APP_BASE_API=https://你的正式版域名

.env.development内容

NODE_ENV=development 
VUE_APP_BASE_API=/api

其中/api是本地开发时候的代理，避免接口调试跨域，代理在配置在根目录vue.config.js中

devServer: {
    proxy: { 
      "/api": {
        target: "http://192.168.6.152:10086",   //替换你的api地址
        changeOrigin: true, //這裡true表示实现跨域
        pathRewrite: {
          "^/api": "", 
        },
      } 
    },
  },