vue项目 axios二次封装请求，如有错误，请指点。

1.首先在项目上装上
npm install axios //请求
npm install qs //转义

2.在src文件夹目录下创建api文件夹（api是名称，看个人取）
3.然后创建http.js文件 如图：

4.在http.js文件里直接上代码了

import axios from "axios";
import qs from "qs"
 

/**
 * 根据环境变量区分接口的默认地址
 */
switch(process.env.NODE_ENV){
    case "production":  //生产环境
        axios.defaults.baseURL = "http://api.com"	//这些都是随便写的
        break;
    case "test":        //测试环境
        axios.defaults.baseURL = "http://127.0.0.1:8080"	//这些都是随便写的
        break;
    default:            //默认环境
        axios.defaults.baseURL = "http://127.0.0.1:3000";	//这些都是随便写的

}

/**
 * 设置超时时间和跨域是否允许携带凭证
 */

axios.defaults.timeout = 10000;
axios.defaults.withCredentials = true

/**
 * 设置请求头 传递数据的格式(看服务器要求什么格式,有些是json格式)
 * x-www-form-urlencoded
 * ?xxx=xxx&aaa=aaa
 */
axios.defaults.headers["content-Type"] = 'application/x-www-form-urlencoded';
axios.defaults.transformRequest = data=> qs.stringify(data);



/**
 * 设置请求拦截器
 * 过程:
 * 客户端发送请求 -> 请求拦截器  ->服务器
 * token校验(JWT) 接受服务返回的token,存到vuex/本地存储中,
 * 每一次向服务器发请求,我们应该把token带上
 */

axios.interceptors.request.use((config)=>{
    //携带上token
    let token = localStorage.getItem('token');
    token && (config.headers.Authorization = token)
    return config;
},error=>{
    return Promise.reject(error);
});


/**
 * 响应拦截器
 * 过程
 * 服务器返回学习 -> 响应拦截  -> 客户端JS获取到信息
 * 
 */

axios.interceptors.response.use(response=>{
    return response.data;
},error=>{
    // return Promise.reject(error)
    let {response} = error;

    if(response){
        // => 服务器最起码返回结果了
        switch(response.status){
            case 401:   //权限

                break;
            case 403: //服务器拒绝执行(token过去)

                break;
            case 404://找不到页面

                break
        }
    }else{
        // =>服务器连结果都没有返回 //没有网
        if(!window.navigator.onLine){
            // 断网处理:可以跳转到断网的页面 router
            return;
        }
        return Promise.reject(error);

    }
})



export default axios;	//

说明一下这一块

/**
 * 根据环境变量区分接口的默认地址
 */
switch(process.env.NODE_ENV){
    case "production":  //生产环境
        axios.defaults.baseURL = "http://api.com"	//这些都是随便写的
        break;
    case "test":        //测试环境
        axios.defaults.baseURL = "http://127.0.0.1:8080"	//这些都是随便写的
        break;
    default:            //默认环境
        axios.defaults.baseURL = "http://127.0.0.1:3000";	//这些都是随便写的

}

这一块是根据启动的时候改变或者打包的时候把IP和端口改变

具体配置在
package.json文件中：

"scripts": {
    "serve": "vue-cli-service serve",
    "server:text":"set NODE_ENV=test&&vue-cli-service serve", 
    "server:production":"set NODE_ENV=production&&vue-cli-service serve",
    "build": "vue-cli-service build"
  },

如果我在cmd 跑 npm run server:text的话，IP和端口为：http://127.0.0.1:8080

以上就是axios请求封装好了，
具体实现接口管理为：

5.在src/api文件夹里头创建api.js文件来管理模块，路径图示：

api.js具体代码为：

/**
 * 这里数据请求的唯一入口
 */

import index from './module/index'
import user from './module/user'

export default{
    index,
    user
}

然后在api文件夹中创建一个module文件夹管理各个模块：

module/index.js内容为：

import axiosHttp from '../http'

function login(){
    return axiosHttp.post('/login') //这里的  '/login'  是具体的接口后面的名称  例如:http://127.0.0.1/api/login
}

export default{
    login
}

module/user.js内容为：

import axiosHttp from '../http'

function userInfo(){
    return axiosHttp.post('/userInfo')  //这里的  '/userInfo'  是具体的接口后面的名称  例如:http://127.0.0.1/api/userInfo
}

export default{
    userInfo
}

最后把模块话的文件抛出去给mian.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import api from './api/api'		//主要是这块 主要是这块 主要是这块 

Vue.config.productionTip = false
Vue.prototype.$api = api;		//主要是这块 主要是这块 主要是这块 
new Vue({
  router,
  store,
  render: function (h) { return h(App) }
}).$mount('#app')

然后在其他vue组件随便写个按钮事件触发一下对应的api

<button @click="getUserInfoFn">测试接口1</button>

methods:{
    getUserInfoFn(){
      this.$api.user.userInfo()
    }
  }

6.运行启动查看IP和端口号：
进入该项目的文件夹中：npm run server:text 启动

点击按钮查看

完。

如有错误，请指点。谢谢，喜欢的就收藏，谢谢。