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);
});