欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

解決vue跨域axios異步通信問題

 更新時間:2019年04月17日 10:56:58   作者:lianjy357  
這篇文章主要介紹了解決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)文章

  • vue指令?v-bind的使用和注意需要注意的點

    vue指令?v-bind的使用和注意需要注意的點

    這篇文章主要給大家分享了?v-bind的使用和注意需要注意的點,下面文章圍繞?v-bind指令的相關(guān)資料展開內(nèi)容且附上詳細代碼?需要的小伙伴可以參考一下,希望對大家有所幫助
    2021-11-11
  • vue 導出文件,攜帶請求頭token操作

    vue 導出文件,攜帶請求頭token操作

    這篇文章主要介紹了vue 導出文件,攜帶請求頭token操作,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-09-09
  • vue2從數(shù)據(jù)變化到視圖變化發(fā)布訂閱模式詳解

    vue2從數(shù)據(jù)變化到視圖變化發(fā)布訂閱模式詳解

    這篇文章主要為大家介紹了vue2從數(shù)據(jù)變化到視圖變化發(fā)布訂閱模式詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2022-09-09
  • vue實現(xiàn)驗證用戶名是否可用

    vue實現(xiàn)驗證用戶名是否可用

    這篇文章主要為大家詳細介紹了vue實現(xiàn)驗證用戶名是否可用,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2021-01-01
  • vue3子組件上綁定(v-model="xx")父組件傳過來的值后報錯解決

    vue3子組件上綁定(v-model="xx")父組件傳過來的值后報錯解決

    這篇文章主要給大家介紹了關(guān)于vue3子組件上綁定(v-model="xx")父組件傳過來的值后報錯解決辦法,文中通過示例代碼介紹的非常詳細,對大家學習或者使用vue3具有一定的參考學習價值,需要的朋友可以參考下
    2023-07-07
  • vue3如何按需加載第三方組件庫詳解

    vue3如何按需加載第三方組件庫詳解

    距離 Vue 3.0 正式版發(fā)布已經(jīng)有一段時間了,關(guān)于vue3組件庫相關(guān)的問題還是挺多人感興趣的,這篇文章主要給大家介紹了關(guān)于vue3如何按需加載第三方組件庫的相關(guān)資料,需要的朋友可以參考下
    2021-06-06
  • vue3中利用Export2Excel將數(shù)據(jù)導出為excel表格

    vue3中利用Export2Excel將數(shù)據(jù)導出為excel表格

    這篇文章主要給大家介紹了關(guān)于vue3中利用Export2Excel將數(shù)據(jù)導出為excel表格的相關(guān)資料,最近項目需要前端來導出Excel操作,所以給大家總結(jié)下,需要的朋友可以參考下
    2023-09-09
  • vue-cli項目中使用Mockjs詳解

    vue-cli項目中使用Mockjs詳解

    這篇文章主要介紹了vue-cli項目中使用Mockjs詳解,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-05-05
  • 利用Vue3和element-plus實現(xiàn)圖片上傳組件

    利用Vue3和element-plus實現(xiàn)圖片上傳組件

    element-plus提供了uploader組件,但是不好定制化。所以本文將利用Vue3和element-plus實現(xiàn)一個圖片上傳的組件,感興趣的可以了解一下
    2022-03-03
  • vite+vue3項目中使用SVG方式

    vite+vue3項目中使用SVG方式

    這篇文章主要介紹了vite+vue3項目中使用SVG方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2023-10-10

最新評論