最近在完成一個ERP專案，在采購訂單的新增模塊，實作一個全選功能，在全選程序中每勾選一個都需要一個函式使用axios去后臺請求一次資料，然后渲染到頁面，但是回圈完成后，頁面并沒有正確地顯示資料，究其原因，在該函式中axios去獲取資料是一個異步請求，但是，回圈是不斷執行的，每次回圈axios獲取資料還沒有完成，就要再一次呼叫該方法，資料并沒有請求成功，而回圈已經結束，因此，這樣的方法是不能實作我們的目標，所以我們要將axios請求設為同步請求，在jQuery中ajax獲取資料有一個特定的引數可以配置該請求是否同步，
我們先說一下jQuery如何實作同步請求，
最常用的是jquery的ajax方法：
$.ajax({
url: "XXX",//請求路徑
data: { param1: jsonObj1, params2: str2... },
type: "POST",//GET
//dataType: "JSON",//需要回傳JSON物件(如果Ajax回傳的是手動拼接的JSON字串,需要Key,Value都有引號)
success: function(resp) {
//處理 resp.responseText;
},
error: function(a, b, c) {
//a,b,c三個引數,具體請參考JQuery API
}
})
設定為同步請求之后：
$.ajax({
url: "XXX",//請求路徑
async: false,//關鍵是這個引數 是否異步請求=>false:使用同步請求
data: { param1: jsonObj1, params2: str2... },
type: "POST",//GET
//dataType: "JSON",//需要回傳JSON物件(如果Ajax回傳的是手動拼接的JSON字串,需要Key,Value都有引號)
success: function(resp) {
//處理 resp.responseText;
},
error: function(a, b, c) {
//a,b,c三個引數,具體請參考JQuery API
}
})
將 async設定為false,，即使用ajax的同步請求，
但是我現在做的專案是基于vue+element-ui構建的專案，在vue中，可以使用ES7的異步特性async / await來實作axios進行同步請求，
getInfoFn: async function(){
var that = this;
await that.$api.scheduleApi.queryScheduleInfoFn(
{caseNo: that.basicInfo.caseNo}).then(function (response) {
if(response.data.code == '200') {
var result = response.data.result;
}
});
},
// 呼叫getInfoFn()也需要修飾為異步
changeConfigFn: async function(config){
await this.getInfoFn();
// 執行其它操作
}
同步問題解決后，在該專案中我又碰到了一個踩坑點，在回圈陣列時，我使用了forEach方法，出現了報錯，我的代碼類似于下面這樣子：
function test() {
let arr = [3, 2, 1]
arr.forEach(async item => {
const res = await fetch(item)
console.log(res)
})
console.log('end')
}
function fetch(x) {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(x)
}, 500 * x)
})
}
test()
在網上搜索后才發現，forEach 只支持同步代碼，forEach 只是簡單的執行了下回呼函式而已，并不會去處理異步的情況，并且你在 callback 中即使使用 break 也并不能結束遍歷，在回圈中使用async await，要使用for…of 或者 for 回圈, while回圈，
我把forEach回圈換成for回圈以后，問題就迎刃而解了！
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/277345.html
標籤：其他
下一篇：瀑布流簡介與JS簡易實作