| 這個作業屬於哪個課程 | 2021春軟件工程實踐/S班 |
|---|---|
| 這個作業要求在哪里 | 作業要求 |
| 這個作業的目標 | 回顧自己列出的5到10個問題：嘗試解答、繼續分析、提出新問題5個階段中，每個階段收獲最大的知識或能力是什么？結合自己在個人項目/結對編程/團隊項目的經歷，談談自己的理解或心得 |
| 其他參考文獻 | CSDN,SegmentFault |
第一部分 技術概述
學習原因：因為第一個小組中我們在多次調用上傳圖片接口以上傳多張圖片的時候服務器會返回多次處理過的圖片url，為了處理多次異步請求，並且等待請求完畢后將圖片url保存在前端的js中，所以使用Promise實現異步請求，難點在於理解Promise的工作機制。
第二部分 技術概述
Promise的概念我就不過多贅述，有興趣的同學可以點擊這個鏈接進行了解：Promise的概念。
簡單來說Promise就是一種多重的鏈式調用，當我們需要用一個請求返回的結果當做參數進行第二次請求發送的時候，我們就可以避免使用層級的嵌套回調，而是使用promise進行鏈式的調用。
Promise的用法
一，首先要定義一個Promise數組，可以理解為你把所有你要一起處理的請求都放在一個集合中。然后進行鏈式的調用（順序的執行）。
let promiseArr=[];
二，在把你要發送的請求（可以相同，可以不同）一個個塞入Promise數組，記住要將你的請求封裝為一個Promise對象！！！在這次項目過程中我的用法如下代碼所示,將wx.request封裝為promise對象后再由數組的push操作插入
promiseArr.push(
new Promise(function (resolve,reject) {
..........
wx.request({
url: ..........
method: "POST",
data: {
..........
},
success: function (res) {
..........
if(res.data.code==200)
{
return resolve(res);
}
else{
return reject(res.data.message);
}
},
fail: function (e) {
..........
return reject(e)
},
})
}
});
})
..........
三、接下來就是將promise數組進行執行，這里要使用一個方法：Promise.all(),詳細的描述如圖
這是我在代碼中的使用：
Promise.all(promiseArr).then(function (values) {
console.log(values);
values.forEach(function (e) {//resolve函數返回所得到的values數組
console.log(e);
......
})
.....
}).catch(
reason=>{
console.log(reason)//捕捉reject的結果
}
)
可以看到，前面的代碼中在請求成功返回碼為200時使用了resolve（res）函數，resolve函數的意思就是該請求完成，return resolve（res）返回請求完成的結果，當PromiseArr中的Promise全部請求成功，則會返回到then函數中，返回的是由各Promise請求成功返回的數組values。我們可以通過遍歷values多每個請求返回的內容進行相應的操作。否則當PromiseArr中的Promise請求錯誤，就會返回第一個報錯的Promise請求中的reject（），返回到catch函數里.我們可以在catch函數中對錯誤請求在控制台進行打印了解錯誤發生的情況。
我們可以通過一個簡單的流程圖來了解Promise使用的流程
第三部分 技術使用中遇到的問題和解決過程。
問題：在Promise使用過程中的主要問題還是對Promise這個機制的理解花了很多的時間，一開始上手確實很不容易。
解決方法:我是這樣解決Promise的機制問題的的。第一：多查閱資料，這里有幾篇講的很不錯的博客可以幫助大家理解，基於promise.all實現wx.request微信小程序同步請求，關於微信小程序使用Promise()，微信小程序中使用Promise進行異步流程處理。第二：一定要自己動手寫一下，可以不急着在項目中立馬使用，我的做法是新建了一個js文件，通過塞入幾個簡單的請求，然后用控制台打印Promise.all().then中返回的結果，以及嘗試是否能把返回的結果賦值給本地自定義的變量，掌握熟練以后再在項目中使用。
第四部分 總結
總的來說Promise無論是在網頁端還是微信小程序端都是一個不錯的解決發送多個異步請求的方法，它很好地避免了嵌套回調，同時可以比較輕松地捕捉出現錯誤的請求進行處理，不過解決異步請求還有另一種方法，async-wait，有興趣的小伙伴也可以點擊后面的博客進行了解：微信小程序中使用Async-await方法異步請求變為同步請求，async await 處理異步變同步
第五部分 參考文獻，博客
基於promise.all實現wx.request微信小程序同步請求