解決vue跨域axios異步通信問題
在項目中,常常需要從后端獲取數(shù)據(jù)內(nèi)容。特別是在前后端分離的時候,前端進行了工程化部署,跨域請求成了一個前端必備的技能點。好在解決方案很多。
在vue中,在開發(fā)中,當前使用較多的是axios進行跨域請求數(shù)據(jù),但不少人遇到如下問題:
•異步通信,無法同步執(zhí)行
•無法集中管理
•不便閱讀
•還未請求成功就調(diào)轉(zhuǎn)了
•then里面的邏輯越來越繁雜
以往的網(wǎng)絡(luò)請求的寫法如下:
// main.js // 引入axios import axios from 'axios' Vue.prototype.$axios = axios; // vue頁面中的使用 // get let url = '地址' this.$axios.get(url,{ params:{} // 參數(shù)信息 }) .then((res) => { // 成功后執(zhí)行語句 }) .catch((err) =>{ // 網(wǎng)絡(luò)中斷或失敗執(zhí)行語句 }) // post let url = '地址' this.$axios.post(url,{ // 參數(shù)信息 }) .then((res) => { // 成功后執(zhí)行語句 }) .catch((err) =>{ // 網(wǎng)絡(luò)中斷或失敗執(zhí)行語句 })
或許在目前的過程中異步能夠更好的解決用戶體驗感,先加載后彈出。但總有那么一個場景我們需要大量的內(nèi)容進行處理,而且前后有明顯的順序執(zhí)行的關(guān)系,那么異步通信可能會對你造成不必要的問題。所以,解決運用async/await
解決異步通信問題
在main.js旁邊新建http.js文件
// http.js
引入axios
import axios from 'axios' var http = { // get 請求 get: function(url,params){ return new Promise((resolve,reject) => { axios.get(url,{ params:params }) .then((response) =>{ resolve(response.data) }) .catch((error) => { reject( error ) }) }) } // post 請求 post: function(url,params){ return new Promise((resolve,reject) => { axios.post(url,params) .then((response) => { resolve( response.data ) }) .catch((error) => { reject( error ) }) }) } } export default http
并在main.js入口引入
// 引入http請求 import http from './http.js' Vue.prototype.$http = http
現(xiàn)在就可以在頁面中使用了
// 在vue中使用 // get async login () { let url = '地址' let params = {} // 參數(shù) let res = await this.$http.get(url,params) } // post async login () { let url = '地址' let params = {} // 參數(shù) let res = await this.$http.post(url,params) }
async 放在方法前面
await 放在$http前面就OK了
單詞示意:
async:異步。
await:等待。
總結(jié)
以上所述是小編給大家介紹的解決vue跨域axios異步通信問題,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
如果你覺得本文對你有幫助,歡迎轉(zhuǎn)載,煩請注明出處,謝謝!
相關(guān)文章
vue2從數(shù)據(jù)變化到視圖變化發(fā)布訂閱模式詳解
這篇文章主要為大家介紹了vue2從數(shù)據(jù)變化到視圖變化發(fā)布訂閱模式詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-09-09vue3子組件上綁定(v-model="xx")父組件傳過來的值后報錯解決
這篇文章主要給大家介紹了關(guān)于vue3子組件上綁定(v-model="xx")父組件傳過來的值后報錯解決辦法,文中通過示例代碼介紹的非常詳細,對大家學習或者使用vue3具有一定的參考學習價值,需要的朋友可以參考下2023-07-07vue3中利用Export2Excel將數(shù)據(jù)導出為excel表格
這篇文章主要給大家介紹了關(guān)于vue3中利用Export2Excel將數(shù)據(jù)導出為excel表格的相關(guān)資料,最近項目需要前端來導出Excel操作,所以給大家總結(jié)下,需要的朋友可以參考下2023-09-09利用Vue3和element-plus實現(xiàn)圖片上傳組件
element-plus提供了uploader組件,但是不好定制化。所以本文將利用Vue3和element-plus實現(xiàn)一個圖片上傳的組件,感興趣的可以了解一下2022-03-03