vue + axios---封装一个http请求

在使用vue开发时，官方推荐使用axios来请求接口

//    axios官方地址
https://github.com/axios/axios

可是axios并不像 vue-resource 同样拥有install，即不能直接 Vue.use(axios) 来使用，因此须要咱们本身根据axios来写一个具备install方法的Http库。

1.安装axios

npm install axios

2.建立Http.js文件

import axios from 'axios'

export default {
    install (Vue) {
    //    install方法，向Vue实例中添加一个$http方法
        Vue.prototype.$http = axios
        Vue.$http = axios
    },
    $http: axios
}

export const Http = axios

3.引用

import Vue from 'vue'
import Http from './Http'

Vue.use(http)

如此，就能够在vue中直接使用axios了

4.axios拦截器
在开发过程当中，会须要设置一些请求头，公共参数等，或者须要对请求结果进行统一处理（例如错误处理），这时候就能够用到axios拦截器

建立interceptor.js文件

import axios from 'axios'

let interceptor = ''
export const myInterceptor = interceptor

//    设置请求拦截器
export const setInterceptor = function (response) {
    axios.interceptors.request.use((config) => {
        config.headers.Authorization = token    //设置请求头Authorization
        config.headers.Accept = 'application/json'    //设置请求头Accept 
       /*
           具体配置须要根据实际开发状况来配置
       */
        return config
    })
}
//    移除请求拦截器
export const clearInterceptor = function () {
  axios.interceptors.request.eject(myInterceptor)
}

ps：上例只示范了axios的请求拦截，回复拦截时一样的处理方式
ps：在interceptor中暴露myInterceptor、setInterceptor与clearInterceptor 的缘由是方便随时取消与设置

5.设置axios默认请求地址

axios.defaults.baseURL = 'http://172.0.0.1'

虽然说几乎都是使用webpack代理的方式来配置请求地址，但此方式依然有时会用到