http請求攔截器


一、現象

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

 

二、解決

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

三、總結

統一處理方便

 

 
分類:  Vue
好文要頂  關注我  收藏該文   
0
0
 
 
 
« 上一篇: Vue添加jquer插件
posted on  2017-11-23 15:14 小老虎網絡 閱讀(330) 評論(0) 編輯 收藏
 


免責聲明!

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



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