您好,登錄后才能下訂單哦!
小編給大家分享一下如何解決vue跨域axios異步通信問(wèn)題,希望大家閱讀完這篇文章之后都有所收獲,下面讓我們一起去探討吧!
在項(xiàng)目中,常常需要從后端獲取數(shù)據(jù)內(nèi)容。特別是在前后端分離的時(shí)候,前端進(jìn)行了工程化部署,跨域請(qǐng)求成了一個(gè)前端必備的技能點(diǎn)。好在解決方案很多。
在vue中,在開(kāi)發(fā)中,當(dāng)前使用較多的是axios進(jìn)行跨域請(qǐng)求數(shù)據(jù),但不少人遇到如下問(wèn)題:
?異步通信,無(wú)法同步執(zhí)行
?無(wú)法集中管理
?不便閱讀
?還未請(qǐng)求成功就調(diào)轉(zhuǎn)了
?then里面的邏輯越來(lái)越繁雜
以往的網(wǎng)絡(luò)請(qǐng)求的寫法如下:
// main.js // 引入axios import axios from 'axios' Vue.prototype.$axios = axios; // vue頁(yè)面中的使用 // get let url = '地址' this.$axios.get(url,{ params:{} // 參數(shù)信息 }) .then((res) => { // 成功后執(zhí)行語(yǔ)句 }) .catch((err) =>{ // 網(wǎng)絡(luò)中斷或失敗執(zhí)行語(yǔ)句 }) // post let url = '地址' this.$axios.post(url,{ // 參數(shù)信息 }) .then((res) => { // 成功后執(zhí)行語(yǔ)句 }) .catch((err) =>{ // 網(wǎng)絡(luò)中斷或失敗執(zhí)行語(yǔ)句 })
或許在目前的過(guò)程中異步能夠更好的解決用戶體驗(yàn)感,先加載后彈出。但總有那么一個(gè)場(chǎng)景我們需要大量的內(nèi)容進(jìn)行處理,而且前后有明顯的順序執(zhí)行的關(guān)系,那么異步通信可能會(huì)對(duì)你造成不必要的問(wèn)題。所以,解決運(yùn)用async/await
解決異步通信問(wèn)題
在main.js旁邊新建http.js文件
// http.js
引入axios
import axios from 'axios' var http = { // get 請(qǐng)求 get: function(url,params){ return new Promise((resolve,reject) => { axios.get(url,{ params:params }) .then((response) =>{ resolve(response.data) }) .catch((error) => { reject( error ) }) }) } // post 請(qǐng)求 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請(qǐng)求 import http from './http.js' Vue.prototype.$http = http
現(xiàn)在就可以在頁(yè)面中使用了
// 在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:等待。
看完了這篇文章,相信你對(duì)“如何解決vue跨域axios異步通信問(wèn)題”有了一定的了解,如果想了解更多相關(guān)知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道,感謝各位的閱讀!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。