微信小程序開(kāi)發(fā)中Promise的使用(aysnc,await)及場(chǎng)景分析
0.錯(cuò)誤描述
今天在開(kāi)發(fā)中犯了一個(gè)比較嚴(yán)重的錯(cuò)誤
對(duì)于Promise的錯(cuò)誤使用
場(chǎng)景:
微信小程序中展示搜索條件列表

<strong>// API請(qǐng)求工具函數(shù)
const apiRequest = (url, method = 'GET', headers = {}) => {
return new Promise((resolve, reject) => {
wx.request({
url,
method,
header: headers,
success: (res) => resolve(res),
fail: (error) => reject(error)
});
});
};
const fetchTypelist = async () => {
const app = getApp();
const queryParams = app.globalData.queryParams;
console.log(queryParams)
let url = `${API_BASE_URL}/industryType/page?pageNo=1&pageSize=10`;
// 添加常規(guī)的查詢參數(shù)
for (const [key, value] of Object.entries(queryParams)) {
if (value) {
url += `&${key}=${encodeURIComponent(value)}`;
}
}
try {
const headers = {}; // 如果需要token,可以在這里添加
const response = await apiRequest(url, 'GET', headers);
if (response.data.code === 200) {
console.log(response.data)
return response
} else {
throw new Error('獲取地址列表失敗');
}
} catch (error) {
throw error;
}
};
/.................../
調(diào)用方法
let result = fetchTypelist()
console.log(result)</strong>猜猜會(huì)打印什么?
一個(gè)promise是的僅僅只是一個(gè)promise,并沒(méi)有拿到請(qǐng)求返回的結(jié)果
1.分析
async 函數(shù)默認(rèn)返回一個(gè) Promise,即使你在 async 函數(shù)中顯式返回了值。
當(dāng)你調(diào)用 async定義的函數(shù) (fetchTypelist) 時(shí),返回的實(shí)際上是一個(gè) Promise,而不是直接返回的數(shù)據(jù)。
2.解決方法
2.1.使用await等待方法的執(zhí)行,獲取返回值
<strong>const getTypelist = async () => {
try {
const typelist = await fetchTypelist();
console.log(typelist); // 這里可以獲取到返回的 rows
} catch (error) {
console.error(error); // 處理錯(cuò)誤
}
};</strong>2.2.使用鏈?zhǔn)秸{(diào)用.then()來(lái)處理promise
<strong>fetchTypelist()
.then((typelist) => {
console.log(typelist);
})
.catch((error) => {
console.error(error);
});</strong>3.成功獲取

到此這篇關(guān)于微信小程序開(kāi)發(fā)中Promise的使用(aysnc,await)的文章就介紹到這了,更多相關(guān)微信小程序Promise使用內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JavaScript判斷瀏覽器運(yùn)行環(huán)境的詳細(xì)方法
這篇文章主要給大家介紹了關(guān)于JavaScript判斷瀏覽器運(yùn)行環(huán)境的詳細(xì)方法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用JavaScript具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06
Javascript數(shù)組的排序 sort()方法和reverse()方法
JavaScript提供了sort()方法和reverse()方法,使得我們可以簡(jiǎn)單的對(duì)數(shù)組進(jìn)行排序操作和逆序操作2012-06-06
解決canvas畫(huà)布使用fillRect()時(shí)高度出現(xiàn)雙倍效果的問(wèn)題
下面小編就為大家?guī)?lái)一篇解決canvas畫(huà)布使用fillRect()時(shí)高度出現(xiàn)雙倍效果的問(wèn)題。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-08-08
javascript中Date format(js日期格式化)方法小結(jié)
這篇文章主要介紹了javascript中Date format,即js日期格式化的方法.實(shí)例總結(jié)了三種常見(jiàn)的JavaScript日期格式化技巧,需要的朋友可以參考下2015-12-12
javascript隨機(jī)生成用戶名的實(shí)現(xiàn)方式
這篇文章主要介紹了javascript隨機(jī)生成用戶名的實(shí)現(xiàn)方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08
JS實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)鏈接的幾種方式匯總
這篇文章主要介紹了JS實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)鏈接的幾種方式,簡(jiǎn)單總結(jié)了幾種頁(yè)面跳轉(zhuǎn)功能的實(shí)現(xiàn),有使用js跳轉(zhuǎn)頁(yè)面,返回上一次預(yù)覽界面及button按鈕添加事件跳轉(zhuǎn),本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友參考下吧2024-01-01
js實(shí)現(xiàn)無(wú)縫滾動(dòng)圖
本文主要分享了js實(shí)現(xiàn)無(wú)縫滾動(dòng)圖的示例代碼,具有很好的參考價(jià)值,下面跟著小編一起來(lái)看下吧2017-02-02

