axios前端请求全局封装及引入

1.根据环境变量不同配置不同baseURL,在utils文件夹新建ip-config.js文件

const env=process.env.NODE_ENV;
const IP={
     development:{//开发环境
        baseIp:'http://5.23.198.12:8088/yzt-cloud/',
     },
     production:{//生产环境
        baseIp:'http://5.23.198.12:8088/yzt-cloud/',
     },
     test:{
        baseIp:'http://5.23.198.12:8088/yzt-cloud/',//测试环境
     }
};
export default IP[env];

 说明：process.env.NODE_ENV的值是根据package.json文件mode 后面值确认的，根据不同的运 行命令获取不同的mode值，以便获取不同的baseURL

 "scripts": {
    "serve": "vue-cli-service serve",
    "pro": "vue-cli-service build --mode production",
    "test": "vue-cli-service build --mode test",
    "lint": "vue-cli-service lint",
    "report": "vue-cli-service build --report"
  },

2.在utils文件夹里新建request.js文件，同时引入ip-config文件

import axios from "axios";
import { Message} from 'element-ui';
import ipConfig from "./ip-config";
const service=axios.create({
     baseURl:ipConfig.baseIp,
     timeout: 3 * 1000,//设置三秒超时
});
//请求拦截器
service.interceptors.request.use(config =>{
    //发请求前做的一些处理，数据转化，配置请求头，设置token,设置loading等，根据需求去添加
    config.headers = {
     'Content-Type':'application/json' //配置请求头
   }
   const token=localStorage.getItem('token')
   if(token){
      config.headers['Authorization'] = 'Bearer ' + token
   }
   return config
},error =>{
     Promise.reject(error)
})
// 响应拦截器
service.interceptors.response.use(response =>{
     //接收到响应数据并成功后的一些共有的处理，关闭loading等
     return response.data.data
},error =>{
     /***** 接收到异常响应的处理开始 *****/
     if (error && error.response) {
          // 1.公共错误处理
          // 2.根据响应码具体处理
          switch (error.response.status) {
               case 400:
                    error.message = '错误请求'
                    break;
               case 401:
                    error.message = '未授权，请重新登录'
                    break;
               case 403:
                    error.message = '拒绝访问'
                    break;
               case 404:
                    error.message = '请求错误,未找到该资源'
                    window.location.href = "/NotFound"
                    break;
               case 405:
                    error.message = '请求方法未允许'
                    break;
               case 408:
                    error.message = '请求超时'
                    break;
               case 500:
                    error.message = '服务器端出错'
                    break;
               case 501:
                    error.message = '网络未实现'
                    break;
               case 502:
                    error.message = '网络错误'
                    break;
               case 503:
                    error.message = '服务不可用'
                    break;
               case 504:
                    error.message = '网络超时'
                    break;
               case 505:
                    error.message = 'http版本不支持该请求'
                    break;
               default:
                    error.message = `连接错误${error.response.status}`
          }
     } else {
          // 超时处理
          if (JSON.stringify(error).includes('timeout')) {
               Message.error('服务器响应超时，请刷新当前页')
          }
          error.message = '连接服务器失败'
     }
     Message.error(error.message)
     /***** 处理结束 *****/
     //如果不需要错误处理，以上的处理过程都可省略
     return Promise.resolve(error.response)
})
export default service

3.在utils文件夹里新建http.js文件，封装常见的get、post、put、delete等请求

import request from './request';
const http ={
    get(url,params){
        const config = {
            method: 'get',
            url:url
        }
        if(params) config.params = params
        return request(config)
    },
    post(url,params){
        const config = {
            method: 'post',
            url:url
        }
        if(params) config.data = params
        return request(config)
    },
    put(url,params){
        const config = {
            method: 'put',
            url:url
        }
        if(params) config.params = params
        return request(config)
    },
    delete(url,params){
        const config = {
            method: 'delete',
            url:url
        }
        if(params) config.params = params
        return request(config)
    }
}
export default http

4.在入口文件main.js里全局引入http.js文件并全局挂载

import http from './utils/http';
Vue.prototype.$http = http

5.页面调用请求

 this.$http.get('/abc/code/edf',{apiId:'158'}).then(()=>{})