Vue2全家桶之三：vue-resource(不推薦)----axios(推薦） · PHP開發知識儲備

這篇文章去年5月就寫了，還差一點沒收尾，覺得寫的不好放在日記本里沒發布，今天就發了吧，重點看我axios的那個長長的例子。初學者如果看不懂私信我吧。。有錯誤也請大佬拍磚，畢竟我已經心不在焉的去考公了，做項目只想完成功能就算了，心不在這里啊。。。 `vue-resource`早已不再更新！尤大大推薦用**axios**！! 這里還是先簡單說一下vue-resource。 > ??vue-resource是Vue.js的一款插件，它可以通過XMLHttpRequest或JSONP發起請求并處理響應。也就是說，Ajax能做的事情，vue-resource插件一樣也能做到，而且vue-resource的API更為簡潔。劃重點，vue-resource還提供了非常有用的inteceptor(攔截器)功能（經常使用），使用inteceptor可以在請求發送前和發送請求后做一些處理，比如使用inteceptor在ajax請求時顯示loading界面，或者在請求發送前在headers中設置token，加入token驗證，攔截器在axios中詳細介紹。 ### 一、簡單介紹vue-resource用法 ##### 1.引入 ~~~jsx import Vue from 'vue' import VueResource from 'vue-resource' Vue.use(VueResource) ~~~ ##### 2.使用引入vue-resource后，可以基于全局的Vue對象使用http，也可以基于某個Vue實例使用http。 ~~~tsx 在一個Vue實例內使用$http this.$http.get('/Url', [options]).then((response) => { // 響應成功回調 }, (response) => { // 響應錯誤回調 }); ~~~ ##### 3.跨域解決vue-resource post請求跨域問題： vue提供了一個簡單的解決方法，就是 `Vue.http.options.emulateJSON = true` 其實等同于在headers中添加 'Content-Type': 'application/x-www-form-urlencoded'。注意：$http請求和jquery中使用ajax還是有點區別，這里的post的data默認不是以`form data`的形式，而是`request payload`。所以你們別忘了將emulateJSON 屬性設置為true，即可解決這個問題。`Vue.http.options.emulateJSON = true` form data和request payload的區別： * form date get請求，是將請求參數以&方法，拼接在url后面，如：[http://www.dxl.com?name=dxl&password=8888](https://links.jianshu.com/go?to=http%3A%2F%2Fwww.dxl.com%3Fname%3Ddxl%26password%3D8888); 真正可以明顯看出區分的是在post請求上， post請求時，頭文件中Content-Type 是默認值 application/x-www-form-urlencoded，參數是放在 `form date`中的。 * request payload post請求時，頭文件中Content-Type 是默認值 application/json;charset=UTF-8，參數是放在 `request payload` 中的。 ~~~jsx JSONP請求: getJsonp: function() { this.$http.jsonp(this.apiUrl).then(function(response){ this.$set('gridData', response.data) }) } ~~~ ##### 4.resource服務 `vue-resource`提供了另外一種方式訪問HTTP——resource服務 resource對象也有兩種訪問方式：全局訪問：Vue.resource 實例訪問：this.$resource （1）get請求 ~~~tsx getCustomers: function() { var resource = this.$resource(this.apiUrl) vm = this resource.get() .then((response) => { vm.$set('gridData', response.data) }) .catch(function(response) { console.log(response) }) } ~~~ （2）post請求使用save方法發送POST請求。 ~~~jsx createCustomer: function() { var resource = this.$resource(this.apiUrl) vm = this resource.save(vm.apiUrl, vm.item) .then((response) => { vm.$set('item', {}) vm.getCustomers() }) this.show = false } ~~~ （3）使用update方法發送PUT請求，使用remove或delete方法發送DELETE請求 ##### 5.攔截器interceptors ~~~jsx Vue.http.interceptors.push((request, next) => { // ... // 請求發送前的處理邏輯 // ... next((response) => { // ... // 請求發送后的處理邏輯 // ... // 根據請求的狀態，response參數會返回給successCallback或errorCallback return response }) }) ~~~ ### 二、axios ##### 1.介紹 > Axios 是一個基于 promise 的 HTTP 庫，可以用在瀏覽器和 node.js 中。 > 看這個吧，傳送門→[http://www.hmoore.net/yunye/axios/234845](https://links.jianshu.com/go?to=https%3A%2F%2Fwww.hmoore.net%2Fyunye%2Faxios%2F234845) > axios支持IE8。它可以： * 從瀏覽器中創建 `XMLHttpRequests` * 從 node.js 創建 `http`請求 * 支持 Promise API * 攔截請求和響應 * 轉換請求數據和響應數據 * 取消請求 * 自動轉換 JSON 數據 * 客戶端支持防御 `XSRF` （1）get請求 ~~~jsx axios.get('/user', { params: { ID: 1111 } }) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); }); // 還可以這么寫，es7新特性async/await async function getUser() { try { const response = await axios.get('/user?ID=1111'); console.log(response); } catch (error) { console.error(error); } } *async用于聲明一個函數是異步的，而await是“等待”的意思，就是用于等待異步完成。 await只能在async函數中使用。 await可以讓js進行等待，直到一個promise執行并返回它的結果，js才會繼續往下執行。 async/await 面試經常問到哦，百度查一下，劃重點 ~~~ （2）post請求 ~~~jsx axios.post('/user', { firstName: 'xiliDong', lastName: 'dongxili' }) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); }); //或者這樣寫 axios({ method: 'post', url: '/user', data: { firstName: 'xiliDong', lastName: 'dongxili' } }); ~~~ （3）執行多個并發請求 ~~~jsx function getUserAccount() { return axios.get('/user/12345'); } function getUserPermissions() { return axios.get('/user/12345/permissions'); } axios.all([getUserAccount(), getUserPermissions()]) .then(axios.spread(function (acct, perms) { // 兩個請求現在都執行完成 })); ~~~ ##### 2.創建實例（重點）可以使用自定義配置新建一個 axios 實例 ###### axios.create(\[config\]) ~~~csharp var instance = axios.create({ baseURL: 'https://some-domain.com/api/', timeout: 1000, headers: {'X-Custom-Header': 'foobar'} }); ~~~ ###### （1）響應結構： ~~~jsx { data: {}, // data由服務器提供的響應 status: 200, // 服務器響應的 HTTP 狀態碼 statusText: 'OK', // 服務器響應的 HTTP 狀態信息 headers: {}, // 服務器響應的頭 config: {} // 為請求提供的配置信息 } 使用 then 時，你將接收下面這樣的響應： axios.get('/user/1111') .then(function(response) { console.log(response.data); console.log(response.status); console.log(response.statusText); console.log(response.headers); console.log(response.config); }); ~~~ ###### （2）指定配置的默認值： ~~~rust axios.defaults.baseURL = 'https://api.example.com'; axios.defaults.headers.common['Authorization'] = AUTH_TOKEN; axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'; ~~~ * 自定義實例默認值: ~~~csharp // 創建實例時設置配置的默認值 var instance = axios.create({ baseURL: 'https://api.example.com' }); // 在實例已創建后修改默認值 instance.defaults.headers.common['Authorization'] = AUTH_TOKEN; ~~~ ###### （3）攔截器： (axios配置看我這個例子就差不多了） ~~~tsx // request攔截器 import axios from 'axios' import router from '../router' // 創建axios實例 const service = axios.create({ timeout: null // 請求超時時間 }) let serviceTips = '服務器超時' // request攔截器 service.interceptors.request.use( config => { // console.log(service.interceptors) // 獲取本地token let token = localStorage.getItem('tokendata') // 設置請求頭 let headers = 'application/json' // 是否攜帶token let tokenFlag = true // 是否修改請求信息 if (config.opts) { // 獲取攜帶token狀態 tokenFlag = config.opts ? config.opts.token : true // 獲取請求頭 headers = config.opts.Header ? config.opts.Header : 'application/json' // 拓展頭部參數 let Head = config.opts.Head if (Head) { for (let key in Head) { config.headers[key] = Head[key] } } } // 暫時不加入token驗證 // if (token && tokenFlag) { // // 條件允許，攜帶token請求 // config.headers['JSESSIONID'] = token // // config.headers['X-Auth0-Token'] = token // } else { // headers = 'application/x-www-form-urlencoded' // } // 設置請求格式 config.headers['Content-Type'] = headers return config }, err => { return Promise.reject(err) } ) // http response 服務器響應攔截器 service.interceptors.response.use( response => { return response }, error => { if (error.response) { switch (error.response.status) { case 401: error.response.data = '登陸超時，重新登陸' router.replace({ path: '/login', query: { redirect: router.currentRoute.fullPath } // 登錄成功后跳入瀏覽的當前頁面 }) break case 404: error.response.data = '資源不存在' break case 406: error.response.data = '頭部無攜帶token' break case 412: // 攔截錯誤并重新跳入登頁重新獲取token router.replace({ path: '/login', query: { redirect: router.currentRoute.fullPath } // 登錄成功后跳入瀏覽的當前頁面 }) error.response.data = '秘鑰失效' localStorage.removeItem('tokendata') // 清除token break case 415: error.response.data = '請求type有誤' break case 500: error.response.data = '服務器異常' break } serviceTips = error.response.data } Message.error(serviceTips) return Promise.reject(serviceTips) } ) export default service ~~~ ~~~jsx 配置好了怎么使用呢？在api.js中引入攔截器： import fetch from '@/utils/fetch' // 攔截器 export function getList(obj) { const data = obj return fetch({ url: '', method: 'POST', data }) } -------------------------------- 可以使用 validateStatus 配置選項定義一個自定義 HTTP 狀態碼的錯誤范圍。 export function getList(obj) { const data = obj return fetch({ url: '', method: 'POST', validateStatus: function(status) { // return status >= 200 && status < 300; // 默認的 return status < 500; // 狀態碼在大于或等于500時才會 reject }, data }) } ~~~ ~~~jsx 重點： axios的請求頭默認為'application/json'，即axios會默認序列化 JavaScript 對象為 JSON. 如果想使用 application/x-www-form-urlencoded 格式，你可以使用下面的配置: import Qs from 'qs' export function getList(obj) { const data = Qs.stringify(obj) return fetch({ url: '', method: 'POST', headers: { 'content-type': 'application/x-www-form-urlencoded', // 如果需要XMLHttpRequest，加入這個 'X-Requested-With': 'XMLHttpRequest' }, data }) } ~~~ ~~~kotlin 然后在在vue文件中引入此函數來獲取數據 // param為前端傳入的參數 getList(param).then(res => { if (res.data.code === 0) { console.log(res.data.data); this.allOrderTable = res.data.data.data; this.pageTotal = res.data.data.total; } else { this.$message({ message: `[${res.data.msg}]:查詢失敗`, type: "error" }); } this.listLoading = false; }) .catch(() => {}) ~~~ 如果你想在稍后移除攔截器，可以這樣： ~~~php var myInterceptor = axios.interceptors.request.use(function () {/*...*/}); axios.interceptors.request.eject(myInterceptor); ~~~ ###### （4）使用 cancel token 取消請求：（額，我好像沒用到過（4））可以使用 `CancelToken.source` 工廠方法創建 `cancel token` ~~~jsx var CancelToken = axios.CancelToken; var source = CancelToken.source(); axios.get('/user/1111', { cancelToken: source.token }).catch(function(thrown) { if (axios.isCancel(thrown)) { console.log('Request canceled', thrown.message); } else { // 處理錯誤 } }); // 取消請求（message 參數是可選的） source.cancel('Operation canceled by the user.'); ~~~ 還可以通過傳遞一個 executor 函數到 CancelToken 的構造函數來創建 cancel token： ~~~jsx var CancelToken = axios.CancelToken; var cancel; axios.get('/user/12345', { cancelToken: new CancelToken(function executor(c) { // executor 函數接收一個 cancel 函數作為參數 cancel = c; }) }); // 取消請求 cancel(); 注意，還可以使用同一個 cancel token 取消多個請求 ~~~ 14人點贊 [技術文檔](/nb/22744967) 作者：東西里鏈接：[https://www.jianshu.com/p/65097586d1a2](https://www.jianshu.com/p/65097586d1a2) 來源：簡書著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。