Vue中简单封装Axios请求

在日常开发过程中，常见的需要在业务层和数据服务层中抽离一个接口层，来统一管理数据请求和接口。这样做的好处是显而易见的,不再累述。下面就来试试在Vue中进行Axios的封装操作：

1.首先在src文件夹下建立一个文件夹这里取名为servers，在这个文件夹里建立一个文件这里取名为request.js。下面是request.js内容，这里是我对axios的简单的封装。代码很简单，看注释应该很容易看懂，不再另外说明了。

import axios from 'axios';
import QS from 'qs';

//自动切换环境
if (process.env.NODE_ENV == 'development'){
    axios.defaults.baseURL = '/api';
} else if (process.env.NODE_ENV == 'debug'){
    axios.defaults.baseURL = '/api';
} else if (process.env.NODE_ENV == 'production') { 
    axios.defaults.baseURL = 'http://***********/';
}
//设置超时时间
axios.defaults.timeout = 10000;
// post请求头
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';

//对外接口
export function request({method, url, params}){
    if(method == 'Get'){
        return get(url, params);
    }else if(method == 'Post'){
        return post(url, params);
    }
}

// 封装get方法
function get(url, params){
    return new Promise((resolve, reject) =>{
        axios.get(url, params).then(res =>{
            resolve(res.data);
        }).catch(err =>{
            reject(err.data);
        })
    });

}

// 封装post方法
function post(url, params){
    return new Promise((resolve, reject) =>{
        axios.post(url, QS.stringify(params)).then(res =>{
            resolve(res.data);
        }).catch(err =>{
            reject(err.data);
        })
          
    });
}

//请求拦截(请求发出前处理请求)
axios.interceptors.request.use(
    confirm => {
        //将token放入header，这里用Vuex把token放在store中，取出
       const token = store.state.token;
       token && (config.headers.Authorization = token);  
       return config; 
    },
    error =>{
        return Promise.error(error); 
    }

)

// 响应拦截器（处理响应数据）
axios.interceptors.response.use( 
    response => {
        if(response.state === 200){
            return Promise.resolve(response);
        }else{
            //这个地方可以由后台编辑状态码区分不同情况，做不同的逻辑处理
            return Promise.reject(response);
        }
    },
    error => {
        // //请求失败，这个地方可以根据error.response.status统一处理一些界面逻辑，比如status为401未登录,可以进行重定向
        // router.replace({      
        //     path: '/login',      
        //     query: { redirect: router.currentRoute.fullPath } 
        //    });
        return Promise.reject(error.response);  

    }
)

2.然后在servers可以建立多个文件，来分别管理不同模块的API，下面来建立一个testServer.js为例。内容如下：

import {request} from './request'

export default testServer ={
    getTestData(params){
        return request({ 
            methods: 'Get',
            url:'testApi',
            params:params
        })
    }
} 

3.现在只需要在test业务模块直接导入testServer，调用对应方法即可：

<script>
import testServer from '../servers/testServer.js'
   export default {
         methods: {
           getTestData(params){
               testServer.getTestData(params).then(res =>{
                       //处理数据
               }).catch(err =>{
                       //提示错误
               })
           }
       }
   }
</script>