在項目中，常常需要從后端獲取數(shù)據(jù)內(nèi)容。特別是在前后端分離的時候，前端進行了工程化部署，跨域請求成了一個前端必備的技能點。好在解決方案很多。
在vue中，在開發(fā)中，當前使用較多的是axios進行跨域請求數(shù)據(jù)，但不少人遇到如下問題：
•異步通信，無法同步執(zhí)行
•無法集中管理
•不便閱讀
•還未請求成功就調(diào)轉了
•then里面的邏輯越來越繁雜
以往的網(wǎng)絡請求的寫法如下：
// main.js// 引入axiosimport axios from 'axios'Vue.prototype.$axios = axios;// vue頁面中的使用// getlet url = '地址'this.$axios.get(url,{ params:{} // 參數(shù)信息}) .then((res) => { // 成功后執(zhí)行語句 }) .catch((err) =>{ // 網(wǎng)絡中斷或失敗執(zhí)行語句 })// postlet url = '地址'this.$axios.post(url,{ // 參數(shù)信息}) .then((res) => { // 成功后執(zhí)行語句 }) .catch((err) =>{ // 網(wǎng)絡中斷或失敗執(zhí)行語句 })或許在目前的過程中異步能夠更好的解決用戶體驗感，先加載后彈出。但總有那么一個場景我們需要大量的內(nèi)容進行處理，而且前后有明顯的順序執(zhí)行的關系，那么異步通信可能會對你造成不必要的問題。所以，解決運用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中使用// 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：等待。
總結
以上所述是小編給大家介紹的解決vue跨域axios異步通信問題,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網(wǎng)網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！
新聞熱點
疑難解答
