1. 程式人生 > >vue中promise和axios 同步爬坑小記

vue中promise和axios 同步爬坑小記

es6提供給了我們promise這個物件,我們再也不用像原來那樣多個ajax巢狀來實現同步了,在小編看來,promise本質是語法糖,讓你能更優雅的解決同步問題!本文來說說小編遇到的問題,和個人見解,具體promise語法請大家自行閱讀!

小編遇到的主要問題是有2個非同步的axios,第一個axios的值作為第二個axiosd的引數,也就是說第二個axios必須等待第一個axios完成才能執行,小編開始的寫法是這樣

let prefun = function () {

return new promise(function(resolve,reject){

// axios操作

axios.post(...).then(

(response) => {

`if (返回成功程式碼) {

resolve(需要傳遞的值)

}

}

)

})

}

let nextfun = function (prevalue) {

return new promise(function(resolve,reject){

// axios操作

// 引數部分

let param ={

......

}

axios.post(...).then(

(response) => {

`if (返回成功程式碼) {

resolve(需要傳遞的值)

}

}

)

})

}

prefun().then((value) =>

{

nextfun(prevalue)

}

).catch(....)

正常情況下,prefun產生的值,通過resolve()傳遞到then這個回撥函式,nextfun 這個函式在prefun執行後,才會執行,這樣就完美形成了同步。但是在vue中,

如果vue要呼叫全域性變數,必須加this,於是杯具發生了!問題的關鍵就出在this上,小編找了好久才找到,西湖的水我的淚啊,小編好傷心!

這個方法nextfun 的這個引數

let param = {

引數1: this.全域性變數1

}

promsie裡壓根就讀不到this,也就是說取不到全域性變數,這就是作用域問題了,promise裡的this和vue中的this指向不同,找到問題後,我們就容易解決了。

我們在promise外面定義let _this =this ,然後在promise裡使用_this就好了

let param = {

引數1: _this.全域性變數1

}

這樣完美解決了同步問題,新手還有個問題要注意,雖然then會返回promise,但是如果需要then中的函式也就同步,需要自己手動寫下return new promise....方法

才會和後面的then形成同步關係,如果按照原始的.then.then.then,就是併發,後面幾個then並不會等待前面的then中axios非同步請求完畢,才執行!

相關推薦

vuepromiseaxios 同步小記

es6提供給了我們promise這個物件,我們再也不用像原來那樣多個ajax巢狀來實現同步了,在小編看來,promise本質是語法糖,讓你能更優雅的解決同步問題!本文來說說小編遇到的問題,和個人見解,具體promise語法請大家自行閱讀! 小編遇到的主要問題是有2個非同步的

vue項目實戰小記002

rms lan min ret msg 實例 div clas exp 1.如何使用vuex來保存數據(需要傳參的情況下) 實例說明:登錄->緩存用戶信息->跳轉到首頁->從state獲取用戶信息顯示在頁面上 step1: 新建store.js作為初始化v

AndroidGalleryImageSwitcher同步自動(滾動)播放圖片庫

目標 art trac repl otto fin instance img com 本文主要內容是如何讓Gallery和ImageSwitcher控件能夠同步自動播放圖片集 ,看起來較難,然而,實現的方法非常簡單, 請跟我慢慢來。總的來說,本文要實現的效果如下圖:(截

Vue如何使用axios跨域訪問數據(轉)

基本上 屬性 本地測試 original ogr 必須 內容 .com 內心 最近在項目中需要用到axios,所以就惡補一下這個axios到底是什麽東東。越來它是vue-resource的替代品,官網也說了,以後都用axios, vue-resource不在維護。那麽這

vuenextTick$nextTick

ack for back div cal 回調 class gpo lba * `Vue.nextTick(callback)`,當數據發生變化,更新後執行回調。* `Vue.$nextTick(callback)`,當dom發生變化,更新後執行的回調。 this.nex

vueassetsstatic的區別

需求 壓縮 樣式 就會 sset 簡單 sse index ont Vue中assets和static的區別 再一次框架定型中,與同事在靜態資源的存放上有了一些分歧,後來經過查閱總結如下: 相同點: assets和static兩個都是存放靜態資

Vuerefsref的用法

vue 中的ref 開發過程中遇到的問題 知識點的查漏補缺 vm.$refs ref 開發過程中遇到的問題 在實際的操作過程中發現在created生命週期中列印refs,結果為空物件 crea

vuecomputed watch的異同

computed 在資料未發生變化時,優先讀取快取。computed 計算屬性只有在相關的資料發生變化時才會改變要計算的屬性,當相關資料沒有變化是,它會讀取快取。而不必想 motheds方法 和 watch 方法是的每次都去執行函式。 computed:{ fullName:{

vue過渡動畫結合

動畫、過渡、頁面載入時就有動畫 <style> .de{ width: 100px; height: 100px; background: green; } .fade-leave-active { tran

Vue如何使用axios跨域訪問資料

最近在專案中需要用到axios,所以就惡補一下這個axios到底是什麼東東。越來它是vue-resource的替代品,官網也說了,以後都用axios, vue-resource不在維護。那麼這個axios怎麼用呢,上網搜尋了一大堆,基本上都是雷同,我也不知道那些作者有沒有在

vueeventbus被多次觸發(vue使用eventbus踩過的)【bus.$on事件被多次繫結】

  問題描述:只要頁面沒有強制重新整理,存在元件切換,bus.$on方法會被多次繫結,造成事件多次觸發   觸發bus.$on中繫結的方法.png

vue使用async/await遇到的

為我 解決 官方 ext 分享圖片 col nsf shadow vpd 最近無聊在搞一些新的東西,今天就遇到一個async/await的坑; 因為我用的不是vue官方的腳手架,所以遇到這樣的問題: await is a reserved word 這樣的警告,我猜應該是缺

vue$setdelete

vue給物件新增屬性 對於一般的物件新增屬性,只需要物件新增屬性賦值操作就可以啦,但是不會觸發檢視更新. vue中使用$set()方法,既可以新增屬性,又可以觸發檢視更新。 this.$set(th

Vue如何使用axios

注意:Vue官方推薦的網路通訊庫不再是vue-resource了,推薦使用axios。 安裝 使用 npm: $ npm install axios 2. 在入口main.js中匯入axios 並將axios寫入vue的原型,這樣就能更簡單的使用。 i

vue$route $router的區別

在vue中會出現一種情況 const url=this.$route.query.returnURL; this.$router.push(url);    $router和$route的區別傻傻的分不清 1.先說$

vuePromise物件用法

Promise.all([ 需要非同步一起執行的方法 ]).then(res=>{ res裡面存放的是陣列,上面有多少個方法就有多少個index,每個index是上面對應的方法的返回值 }) 實戰 //獲取列表 getDataList(){ Promise

VUEcomputedwatch的使用

VUE中computed和watch的使用 VUE中computed和watch的使用 1.computed computed用來監控自己定義的變數,該變數不在data裡面宣告,直接在computed裡面定義,然後就可以在頁面上進行雙向資料繫結展示出結果或者用作其他處理; com

Vue watchcomputed的不同

今天我來總結一下vue中computed 和 watch的異同! 一、computed 和 watch 都可以觀察頁面的資料變化。當處理頁面的資料變化時,我們有時候很容易濫用watch。 而通常更好的辦法是使用computed屬性,而不是命令是的watch回撥。 這裡我直接

vuewatchcomputed的區別?

watch就是用於監聽資料變化,比如監控頁面一個變數值的改變需要進行的操作 computed時用於處理複雜的邏輯運算的,它不必每次都像methods一樣呼叫,它有一個快取機制,只有在做出改變的時候才會執行,並且還可以把方法封裝到裡面,只返回一個數據

Vuewatchcomputed的使用演示

watch的使用 :使用watch 監聽firstName的變化 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>D