Vue添加請求攔截器

1、現象

統一處理錯誤及配置請求信息

 

2、解決

一、安裝 axios  , 命令： npm install axios --save-dev

二、在根目錄的config目錄下新建文件 axios.js  ，內容以下：

import axios from 'axios'

// 配置默認的host,假如你的API host是：http://api.htmlx.club
axios.defaults.baseURL = 'http://api.htmlx.club'    

// 添加請求攔截器
axios.interceptors.request.use(function (config) {
　　// 在發送請求以前作些什麼
　　return config
}, function (error) {
　　// 對請求錯誤作些什麼
return Promise.reject(error)
});

// 添加響應攔截器
axios.interceptors.response.use(function (response) {
　　// 對響應數據作點什麼
　　return response
}, function (error) {
　　// 對響應錯誤作點什麼
　　return Promise.reject(error)
});

 

三、在main.js中進行引用，並配置一個別名（$ajax）來進行調用:

import axios from 'axios'
import '../config/axios'

Vue.prototype.$ajax = axios

如圖：

 

 

四、應用，一個登陸的post如：

this.$ajax({
　　method: 'post',
　　url: '/login',
　　data: {
　　　　'userName': 'xxx',
　　　　'password': 'xxx'
　　}
}).then(res => {
　　console.log(res)
})

3、總結

統一處理方便

 

例：

使用iview框架，在main.js添加請求接口攔截器 loading

axios.interceptors.request.use(function (config) {
  iView.LoadingBar.start()
  return config
}),function (error) {
  iView.LoadingBar.error()
  return Promise.reject(error)
}
axios.interceptors.response.use(function (config) {
  iView.LoadingBar.finish()
  return config
}),function (error) {
  iView.LoadingBar.error()
  return Promise.reject(error)
}

 

/**
 * @export
 * @param {any} request
 * @param {any} next
 * @returns
   */
import store from './vuex/store'
// 全局錯誤處理，全局loading
import { setLoading, setTip } from './vuex/actions/doc_actions'
export default function (request, next) {
  if (request.tip !== false) {
    setLoading(store, true)
  }
  next((res) => {
    setLoading(store, false)
    let data = JSON.parse(res.data)
    if (res.status === 0) {
      setTip(store, {
        text: '網絡不給力，請稍後再試'
      })
    }
    if (!data.success) {
      setTip(store, {
        text: data.error_msg
      })
    }
  })
}