微信小程序開發(fā)中Promise的使用(aysnc,await)及場景分析
0.錯誤描述
今天在開發(fā)中犯了一個比較嚴重的錯誤
對于Promise的錯誤使用
場景:
微信小程序中展示搜索條件列表

<strong>// API請求工具函數(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>猜猜會打印什么?
一個promise是的僅僅只是一個promise,并沒有拿到請求返回的結(jié)果
1.分析
async 函數(shù)默認返回一個 Promise,即使你在 async 函數(shù)中顯式返回了值。
當(dāng)你調(diào)用 async定義的函數(shù) (fetchTypelist) 時,返回的實際上是一個 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); // 處理錯誤
}
};</strong>2.2.使用鏈式調(diào)用.then()來處理promise
<strong>fetchTypelist()
.then((typelist) => {
console.log(typelist);
})
.catch((error) => {
console.error(error);
});</strong>3.成功獲取

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

