在項(xiàng)目中，常常需要從后端獲取數(shù)據(jù)內(nèi)容。特別是在前后端分離的時(shí)候，前端進(jìn)行了工程化部署，跨域請(qǐng)求成了一個(gè)前端必備的技能點(diǎn)。好在解決方案很多。

 在vue中，在開發(fā)中，當(dāng)前使用較多的是axios進(jìn)行跨域請(qǐng)求數(shù)據(jù)，但不少人遇到如下問題：

•異步通信，無法同步執(zhí)行
•無法集中管理
•不便閱讀
•還未請(qǐng)求成功就調(diào)轉(zhuǎn)了
•then里面的邏輯越來越繁雜

以往的網(wǎng)絡(luò)請(qǐng)求的寫法如下：

// main.js// 引入axiosimport axios from 'axios'Vue.prototype.$axios = axios;// vue頁(yè)面中的使用// getlet url = '地址'this.$axios.get(url,{ params:{} // 參數(shù)信息}) .then((res) => {  // 成功后執(zhí)行語(yǔ)句 }) .catch((err) =>{  // 網(wǎng)絡(luò)中斷或失敗執(zhí)行語(yǔ)句 })// postlet url = '地址'this.$axios.post(url,{ // 參數(shù)信息}) .then((res) => {  // 成功后執(zhí)行語(yǔ)句 }) .catch((err) =>{  // 網(wǎng)絡(luò)中斷或失敗執(zhí)行語(yǔ)句 })

或許在目前的過程中異步能夠更好的解決用戶體驗(yàn)感，先加載后彈出。但總有那么一個(gè)場(chǎng)景我們需要大量的內(nèi)容進(jìn)行處理，而且前后有明顯的順序執(zhí)行的關(guān)系，那么異步通信可能會(huì)對(duì)你造成不必要的問題。所以，解決運(yùn)用async/await解決異步通信問題

在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中使用// getasync login () { let url = '地址' let params = {} // 參數(shù) let res = await this.$http.get(url,params)}// postasync login () { let url = '地址' let params = {} // 參數(shù) let res = await this.$http.post(url,params)}

async 放在方法前面

await 放在$http前面就OK了

單詞示意：

async：異步。
await：等待。

總結(jié)

以上所述是小編給大家介紹的解決vue跨域axios異步通信問題,希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)錯(cuò)新站長(zhǎng)站網(wǎng)站的支持！
如果你覺得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！