Vue添加請求攔截器


一、現象

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

 

二、解決

1、安裝 axios  , 命令: npm install axios --save-dev

2、在根目錄的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)
});

 

3、在main.js中進行引用,並配置一個別名($ajax)來進行調用:

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

Vue.prototype.$ajax = axios

如圖:

 

 

4、應用,一個登錄的post如:

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

三、總結

統一處理方便

 

例:

使用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
      })
    }
  })
}

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM