axios

axios是Vue工程化开发项目中很流行的一款ajax请求插件，内置了POST,GET请求，极大的减少了前端开发工程师的代码量。即便如此，但如果是开发比较大的项目的话，还是很繁琐的，本文讲述了关于企业级项目开发，对axios请求的封装

为什么要对axios封装
可以更方便的管理和修改axios请求域名，假设是一个庞大的项目，只是修改域名就会花费很多的时间和精力，如果对axios进行了封装，便省去了很多的步骤。

首先
再开始之前，先安装axios和qs插件
在src目录创建一个utils文件夹，里面创建一个request.js 文件，文件完整内容如下

    //导入axios 和 qs 插件
    import axios from "axios"
    import qs from "qs"
    
    //配置全局公共域名
    const baseURL = process.env.NODE_ENV === "production" ? "https://www.xxxxx.com" : "";
    
    
    //创建axios实例 
    let request = axios.create({
        baseURL:baseURL,    //赋值公共域名
        timeout:5000        //设置延迟时间（单位：毫秒）
    })
    
    
    //拦截request的发送请求和响应请求，并做一定的配置
    request.interceptors.request.use(
    
        //拦截发送请求，并给请求头信息headers加上token令牌
        config=>{
            config.headers.token = localStorage.getItem("token");
            return config
        },
        err=>{
            Promise.reject(err)
        }
    )
    request.interceptors.response.use(
    
        //拦截响应请求 ， 这里直接返回数据
        res=>{
            return res;
        },
        err=>{
            Promise.reject(err)
        }
    )
    
    
    //给axios实例对象request添加postURL方法
    request.postURL = function(url,data,option={}){
        //返回一个promise，实现异步处理
        return new Promise(function(resolve,reject){
            request({
                url:url,
                method:"POST",
                data:qs.stringify(data),
                ...option,
                headers:{"Content-Type":"application/x-www-form-urlencoded; charset=UTF-8",...option.headers}
            })
            .then(res=>resolve(res))
            .catch(err=>reject(err))
        })
    }
    
    
    //导出request
    export default request;

这一顿操作之后，请求配置文件就算是编写好了。

接下来

在src目录下创建api文件夹，创建user.js文件，在里面编写请求数据接口的方法，文件内容如下（因为是测试，只编写了几个方法）：

	//导入请求配置文件
    import request from "@/utils/request.js"
    
    //定义接口
    //登录
    let login = function(data){
        return request.postURL("/member/xxxx",data)
    }
    
    //注册
    let register = function(data){
        return request.postURL("/member/xxxx",data)
    }
    
    //注销
    let exit = function(data){
        return request.postURL("/member/xxxx",data)
    }
    
    //获取用户信息
    let getUser = function(data){
        return request.get("/member/xxxx",data)
    }
    
    export {
        login,
        register,
        exit,
        getUser,
    }

在使用的时候可以在组件里做如下操作

    //导入登录的方法
    import {login} from "@/api/user.js"
    
    
    login(登录信息)
    .then(res=>{
        console.log(res)
    })
    .catch(err=>{
        console.log(err)
    })

进行了这样的封装之后，如果后期公司项目需要更换或者是修改域名，可以直接在request.js文件里修改 const baseURL = process.env.NODE_ENV === "production" ? "https://www.xxxx.com" : "";即全局修改域名