###基于`vue-cli`对`axios`的封装及使用

1 引入axios文件

    import axios from 'axios';

2.创建axios的实例对象

    const request = axios.create({
    baseURl: process.env.BASE_API,   // config文件下的prod.env.js中文路径
    timeout: 15000,   // 请求的超时时间
    })；

3.发送请求request（创建的axios的实例对象）的拦截器
在发送任何请求之前，都会先经过这个拦截器

    request.interceptors.request.use(config => {
    // 在发送请求之前所要执行的逻辑代码
    // 当登录用户里面有`token`值时，让每一个请求携带token值
    if(token){
        config.headers.Authorization = token;
        }
        return config;
    },error => {
        // 在请求错误做的逻辑代码
        return Promise.reject(error);
        })

4.得到服务器相应的数据response的拦截器
在接受任何服务器中的数据，都会先经过这个拦截器

    request.interceptors.response.use(response => {
        // 对得到相应数据做的逻辑代码
        return response;
        },error => {
            // 对相应错误做的逻辑代码
            return Promise.reject(error);
            })

5.默认向外暴露创建这个axios实例对象中的方法属性

    export default{
    // axios.get的方法
    get(url,params){
        return request({
            url,
            method:'get',
            params
            })
        },
        // axios.post方法向后台传递的参数为  data
        post(url,params){
            return request({
                url,
                method:'post',
                data:qs.stringify(params)
                })
            },
            // 删除  axios.delete方法
            delete(url,params){
                return request({
                    url,
                    method:'delete',
                    params
                    })
                },
           // 更新  axios.put方法
            put(url,params){
                return request({
                    url,
                    method:'put',
                    data:qs.stringify(params)
                    })
                }
    这里用到了ES 6中的语法，当对象名和函数名相同时，可以省略对象名；定义的操作方法，返回的是axios的实例调用的方法
    }

6.引入axios封装好的方法，用来调用后台接口

    import server from './request';

7.调用后台接口的使用语法

    export const getData = (params) => {
        return server.post('后台接口的地址'，params)
        }
        向外暴露定义的一个函数，他的返回值为调用后台接口返回的数据

8.在vue文件中引用接口函数的语法

    // 当有多个接口函数时，继续向{}中添加即可
    import {getData} from '接口的文件路径'
    // 调用接口，向后台传递参数，得到数据
    getData(params).then(res => {
        const result = res.data;   // 得到的后台数据
        })