vue封装axios

当我们使用vuecli做项目时，用到axios来调用后台数据，这个时候我们要对axios进行封装，方便维护

1.src下新建request文件夹

2.config.js中

let url

if (process.env.NODE_ENV == "development") { 
    // 开发环境中
    url = "http://192.168.1.6:8002" 
} else {
    // 生产环境中
    url = "http://127.0.0.1:8002"
}

export default {
    url
}

3.http.js

import config from './config'
import Axios from 'axios';
import router from '../router'

// 引入提示框
import { MessageBox } from 'element-ui'
import { Message } from 'element-ui' 


const axios = Axios.create({
    baseURL: config.url,
    timeout: 150000, // request timeout  
});

// 添加请求拦截器  作用是在请求发送前进行一些操作
axios.interceptors.request.use(
    function(config) {
        let configurl = config.url
        // 获取存储token中的值  
        let userinfo = JSON.parse(localStorage.getItem('userInfo')) || ''
        // 如果有用户信息，就在请求前加token，我这里是接口返回两个token，所以判断了一下对应的接口加对应的token
        if (userinfo) {
            let tokens = userinfo.cli_user.token
            let xcxtoken = userinfo.wx_user.token
                // 在发送请求之前做些什么
            if (tokens && typeof tokens === 'string') { 
                if (configurl.indexOf("/api_wx") != -1) {
                    config.headers.Authorization = 'Bearer ' + xcxtoken; 
                } else {
                    config.headers.Authorization = 'Bearer ' + tokens; 
                }  
            }
        } 
        // 如果一个token，直接使用这个
        // let userinfo = JSON.parse(localStorage.getItem('userInfo')) || ''
        // let tokens = userinfo.token
        // 在发送请求之前做些什么
        // if (tokens && typeof tokens === 'string') {
            // config.headers.token = tokens; 
        // }
        return config;
    },
    function(error) {
        // 抛出错误
        Message.error('请求中错误:' + error);
        // 对请求错误做些什么
        return Promise.reject(error);
    }
);

// 添加响应拦截器  作用是在接收到响应后进行一些操作
axios.interceptors.response.use(
    function(response) { 
        // 对响应数据做点什么
        if (response.status == 200) {
            if (response.data.code != 0) {
                MessageBox.alert(response.data.msg, '错误', {
                    confirmButtonText: "确定",
                    type: "error",
                }).then(() => {
                    if (response.data.code == 401) {
                         localStorage.removeItem("userInfo");
                        router.replace("/login");
                    }
                })
                if (response.data.msg == "user auth error") {
                    localStorage.removeItem("userInfo");
                    localStorage.removeItem("permissions");
                    router.replace("/login");
                }
                if (response.data.msg == "login timeout or not login") {
                    localStorage.removeItem("userInfo");
                    localStorage.removeItem("permissions");
                    router.replace("/login");
                }
                if (response.data.msg == "登录超时,请重新登录.") {
                    localStorage.removeItem("userInfo");
                    localStorage.removeItem("permissions");
                    router.replace("/login");
                }
            }
        } else {
            // 获取成功后的错误提示
            MessageBox.alert('系统错误', '错误', {
                confirmButtonText: "确定",
                type: "error",
            })
        }


        return response;
    },
    function(error) {
        // 抛出错误提示
        MessageBox.alert(error, '错误', {
                confirmButtonText: "确定",
                type: "error",
            })
            // 对响应错误做点什么
        return Promise.reject(error);
    }
); 
export default axios 

4.api.js

//  登陆
import login from './login'

// 主页
import home from './home'
 
export default {
    ...login,
    ...home,
}

5.模块下使用接口

import http from '../http.js';

// get请求
let getvip = (params) => {
    return http({
        url: '/grade/grade',
        params
    }) 
}

// post请求
let addvip = (data) => {
    return http({
        method: 'POST',
        url: '/grade/grade',
        data
    })
}

export default {
	getvip,
	addvip
}

6.main.js中挂载全局api

// 挂载全局api
import api from './request/api'
Vue.prototype.$api = api

7.在组建中使用

  // 获取列表
    getlist() {
      this.loading = true; 
      this.$api.getvip( this.formInline ).then((res) => {
        this.loading = false;
        if (res.data.code == 1) {
          this.tableData = res.data.data.list; 
        }
      });
    },