axios的使用

1. 下载axios npm install axios --save

2. 在项目下新建config文件夹，config/http.js

3. 使用axios

import axios from 'axios/index'     //导入axios

const instance = axios.create({     //创建instance
    baseURL:'http://api.yrqx88.com/api/index',      //进行baseURL配置，地址前缀
    timeout:10000,                                  //超时timeout配置
    method:'post'                                   //请求方法配置
});

// 添加请求拦截器
instance.interceptors.request.use(config => {
    // 在发送请求之前做某事，比如说 设置token
    if(sessionStorage.getItem('token')){
        config.headers['token'] = sessionStorage.getItem('token');
    }
    //store.state.makserShow = true;  
    //配置遮罩层loading，没有配置遮罩层略过此项
    config.headers = { 'content-type': 'application/x-www-form-urlencoded'};    //设置请求头
    //config.data = qs.stringify(config.data);                                    
    //配置post发送的参数为qs处理后的参数，没有引入qs略过此项
    return config;      //返回配置给请求
}, error => {
    // 请求错误时做些事
    return Promise.reject(error);
});

// 添加响应拦截器
instance.interceptors.response.use(response => {
    // let that = this;
    // setTimeout(store.state.makserShow = false,500);     
    //配置遮罩层loading取消显示，没有配置这招略过此项
    // if(response.data.code === 0){
    //  return response.data;
    //  }
    //else{
    //    globalBus.$toast(response.data.msg);
    //    return Promise.reject(response.data);
    //}
    return response;    
    //if内为对数据进行的统一处理，可做参考，不需要处理数据直接返回即可。通过对response.data可以获取到接口响应数据
}, error => {
    return Promise.reject(error.response.data);
});

4. 新建config/index.js，封装方法，简化接口请求

import Vue from 'vue'
import axios from './http'

Vue.prototype.axios = axios;

let $axios = (data,fn1) =>{     
//创建axios函数，携带两个参数，第一个参数表示请求数据，第二个参数表示成功回调
    axios.post('',data).then(fn1,err=>{
        window.console.log(err);    //对失败请求进行统一处理
    });
};
export default  $axios;     //导出

5. 在main.js中使用

//引入axios
import axios from '../config/index'
Vue.prototype.axios = axios;

6. 在组件内使用

that.axios(params,(res)=>{
    res     //返回值
})

总结：通过以上，就封装好了一个axios.post的请求数据方式啦，如果要进行get请求，可以将第三步的instance中的methods去掉，在index.js方法封装内继续再封装一个get方法即可。此外，loading遮罩 的配置通过调整vuex内的state.makserShow可以确定loading的显示与隐藏。在request时配置为true,显示loading;在response时配置为false,表示请求已经响应，隐藏loading; token的配置 可以在config配置时，通过config.headers['token']进行配置token