封裝axios方法,封裝axios錯誤處理
阿新 • • 發佈:2018-12-16
// 配置API介面地址與伺服器靜態檔案地址 var root = 'http://127.0.0.1:3000/'; // 引用axios var axios = require('axios') var qs = require('qs') axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8' //全域性封裝錯誤處理函式 axios.interceptors.request.use( config => { config.headers = { 'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8' }; // 在post請求傳送出去之前,對其進行編碼 if (config.method === 'post') { config.data = qs.stringify(config.data); } return config; }, err => { return Promise.reject(err); }); // http response 攔截器 axios.interceptors.response.use( response => { return response; }, error => { if (error.response) { console.log("請求錯誤", error.response.status); switch (error.response.status) { case 401: // store.dispatch('logout'); console.log("401"); break; case 404: console.log('介面不存在'); break; case 500: console.log('伺服器錯誤'); } } return Promise.reject(error);// 返回介面返回的錯誤資訊 }); function getdata(method, url, params, success, failure) { axios({ method: method, url: url, data: method === 'POST' || method === 'PUT' ? params : null, params: method === 'GET' || method === 'DELETE' ? params : null, baseURL: root, withCredentials: true, //跨域請求憑證驗證。 timeout: 30000 }) .then(function (res) { success(res.data); }) .catch(function (err) { let res = err.response if (err) { console.log('api error, HTTP CODE: ' + res.status) failure(err.response.statusText) return } }) } // 返回在vue模板中的呼叫介面 export default { get: function (url, params, success, failure) { return getdata('GET', url, params, success, failure) }, post: function (url, params, success, failure) { return getdata('POST', url, params, success, failure) }, put: function (url, params, success, failure) { return getdata('PUT', url, params, success, failure) }, delete: function (url, params, success, failure) { return getdata('DELETE', url, params, success, failure) }, root: root }
post請求需要qs模組進行編碼,不然後臺接收到資料還需要處理,編碼前後後臺接收到的資料格式如下(後臺語言為nodejs)
封裝完成後需要在main.js進行引用。引用的程式碼如下。
import api from './api/index' //封裝axios方法js的地址
Vue.prototype.$api = api //裝載到vue例項上方便呼叫
呼叫方法
this.$api.post( "post", {id:1,name:"142adasdlkjasd"}, response => { console.log(response); }, err=> { console.log(err); } ); }