微信小程序開發(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;
}
};
/.................../
調用方法
let result = fetchTypelist()
console.log(result)</strong>猜猜會打印什么?
一個promise是的僅僅只是一個promise,并沒有拿到請求返回的結果
1.分析
async 函數(shù)默認返回一個 Promise,即使你在 async 函數(shù)中顯式返回了值。
當你調用 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.使用鏈式調用.then()來處理promise
<strong>fetchTypelist()
.then((typelist) => {
console.log(typelist);
})
.catch((error) => {
console.error(error);
});</strong>3.成功獲取

到此這篇關于微信小程序開發(fā)中Promise的使用(aysnc,await)的文章就介紹到這了,更多相關微信小程序Promise使用內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
JavaScript實現(xiàn)下載base64數(shù)據(jù)并兼容低版本
這篇文章主要為大家詳細介紹了如何使用JavaScript實現(xiàn)下載base64數(shù)據(jù)并兼容低版本,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下2024-12-12
TypeScript中如何實現(xiàn)類型安全的路由系統(tǒng)
本文講述TypeScript如何實現(xiàn)類型安全的路由系統(tǒng),路由類型結構、使用infer和Extract提取參數(shù)類型、定義路由配置類型、創(chuàng)建路由表、實現(xiàn)類型安全的導航和位置鉤子等,使用React?Router?v6或Next.js?App?Router,結合zod進行查詢參數(shù)驗證,以實現(xiàn)類型安全的路由系統(tǒng)2025-10-10
VScode中配置JavaScript編譯環(huán)境的方法
這篇文章主要介紹了VSCODE中配置JavaScript編譯環(huán)境的方法,方式一 使用Node.js做為解釋器運行JS代碼 Node.js的安裝和配置,方式二使用VSCODE插件Code Runner運行JS代碼,本文給大家介紹的非常詳細,需要的朋友可以參考下2022-08-08
js/ajax跨越訪問-jsonp的原理和實例(javascript和jquery實現(xiàn)代碼)
最近做了一個項目,需要用子域名調用主域名下的一個現(xiàn)有的功能,于是想到了用jsonp來解決,在我們平常的項目中不乏有這種需求的朋友,于是記錄下來以便以后查閱同時也希望能幫到大家,需要了解的朋友可以參考下2012-12-12
利用Plupload.js解決大文件上傳問題, 帶進度條和背景遮罩層
本篇文章主要介紹了c#+Plupload.js解決大容量文件上傳問題, 帶進度條和背景遮罩層,具有一定的參考價值,感興趣的小伙伴們可以參考一下。2017-03-03

