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