详细的vue-axios的配置及封装

安装axios

npm install axios 

封装axios

在until工具文件夹下新建request.js文件，封装axios代码如下：

//针对axios封装的ajax请求工具类
import axios from 'axios'
import {Message} from 'element-ui'
// 先导入vuex,因为要使用到里面的状态对象
// vuex的路径根据自己的路径去写
import store from '@/store/index';

const service=axios.create({
    baseURL:process.env.APP_BASE_API,    //环境设置
    timeout:5000
})
//请求拦截器
service.interceptors.request.use(
    config=>{
        // 每次发送请求之前判断是否存在token        
        // 如果存在，则统一在http请求的header都加上token，这样后台根据token判断你的登录情况
        // 即使本地存在token，token也有可能是过期的，所以在响应拦截器中要对返回状态进行判断 
        const token = store.state.token;        
        token && (config.headers.Authorization = token);  
        // config.headers['token']=''     //没有登陆界面时，可以不携带token
        return config
    },
    error=>{
        return Promise.reject(error)
    }
    
)


//响应拦截器
service.interceptors.response.use(
    response=>{
        // 如果返回的状态码为200，说明接口请求成功，可以正常拿到数据，否则的话抛出错误     
        if (response.status === 200) {            
            return Promise.resolve(response);        
        } else {            
            return Promise.reject(response);        
        }
    },
    // 服务器状态码不是2开头的的情况
    // 这里可以跟后台开发人员协商好统一的错误状态码    
    // 然后根据返回的状态码进行一些操作，例如登录过期提示，错误提示等
    // 下面列举几个常见的操作，其他需求可自行扩展
    error=>{
       if (error.response.status) {            
            switch (error.response.status) {                
                // 401: 未登录
                // 未登录则跳转登录页面，并携带当前页面的路径
                // 在登录成功后返回当前页面，这一步需要在登录页操作。                
                case 401:                    
                    router.replace({                        
                        path: '/login',                        
                        query: { 
                            redirect: router.currentRoute.fullPath 
                        }
                    });
                    break;

                // 403 token过期
                // 登录过期对用户进行提示
                // 清除本地token和清空vuex中token对象
                // 跳转登录页面                
                case 403:
                     Message({
                        message: '登录过期，请重新登录',
                        type:"waring"
                        duration: 1000,
                    });
                  // 清除token
                    localStorage.removeItem('token');
                    store.commit('loginSuccess', null);
                  // 跳转登录页面，并将要浏览的页面fullPath传过去，登录成功后跳转需要访问的页面 
                    setTimeout(() => {                        
                        router.replace({                            
                            path: '/login',                            
                            query: { 
                                redirect: router.currentRoute.fullPath 
                            }                        
                        });                    
                    }, 1000);                    
                    break; 

                // 404请求不存在
                case 404:
                    Message({
                         message: '网络请求不存在',
                         type:'waring',
                         duration: 2*1000,
                    });
                    break;
                // 其他错误，直接抛出错误提示
                default:
                    Message({
                        message: error.response.data.message,
                        type:'error',
                        duration: 2*1000, 
                    });
            }
            return Promise.reject(error.response);
        }
    }
)

export default service   

注：Message我是用的element-Ui框架中的插件，可根据个人情况设置提示信息。

环境配置

在根目录下新建：.env.development ,开发环境的配置文件，输入如下代码：

VUE_APP_ENV ='development'
VUE_APP_API_BASE='/' 

在根目录下新建：.env.production ,生产环境的配置文件，输入如下代码：

VUE_APP_ENV ='production'
VUE_APP_API_BASE='/'  

注：

• 文件名：vue是根据文件名加载的，所以必须使用如上的文件名；
• 属性名：必须以VUE_APP_开头；

封装get和post方法

在api文件夹下新建一个如user.js文件，封装get和post请求方式，如下：

//先导入封装的axios文件
import request from '@/utils/request'


export function postUserData(data){   //这里方法与后台Controller方法名一致就可以
    return request({
        url:'请求地址',
        method:'post',   //post请求方式
        data
    })
}

export function getUserData(data){   
    return request({
        url:'请求地址',
        method:'get',     //get请求方式
        data
    })
}

请求方法的使用

首先在使用的vue文件中导入调用的方法：

import { postUserData,getUserData } from "@/api/user.js";

在需要发送请求的地方使用方法，已getUserData 为例：

initData(){
  var query={     //可根据实际需求传响应的参数
    pageIndex:1,
    pageSize:20 ,
  }
 getUserData(query).then(res=>{
      console.log(res)
  }) 
}