Vue Ajax配置（基于axios）

直接修改main.js文件即可。

引用

import axios from 'axios'

配置拦截器

如果你需要在特定的响应码下做特殊处理，可以定义自己的拦截器，方法如下：

标记异步请求（很重要！）

axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest'

配置请求拦截器

axios.interceptors.request.use(config => {
  return config
}, err => {
  console.log(err)
})

配置响应拦截器

axios.interceptors.response.use(response => {
  return response
}, function (error) {
  if (error.response.status === 401) {
    window.location = error.response.headers.location
  } else if (error.response.status >= 500) {
    // element-ui
    Vue.prototype.$message({ type: 'error', message: '服务不可用，请稍候再试' })
    return Promise.reject(error)
  } else {
    return Promise.reject(error)
  }
})

注册

Vue.prototype.$http = axios

使用

示例一（同步）

let id = 10001;
const resp = await this.$http.get('/api/order/info', { params: { id } });
console.log(resp.data);

示例二（异步）

let id = 10001;
this.$http.get('/api/order/info', { params: { id } }).then(({ data }) => {
  console.log(data);
});

示例三（form data）

这种情况比较特殊，必须要将json序列化成query-string，如下所示：

import qs from 'query-string'

let id = 10001;
this.$http.post('/api/order/info', qs.stringify(jsonData)).then(({ data }) => {
  console.log(data);
});