微信小程序開發(fā)中Promise的使用(aysnc,await)及場景分析
0.錯誤描述
今天在開發(fā)中犯了一個比較嚴重的錯誤
對于Promise的錯誤使用
場景:
微信小程序中展示搜索條件列表
<strong>// API請求工具函數 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ī)的查詢參數 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
函數默認返回一個 Promise
,即使你在 async
函數中顯式返回了值。
當你調用 async定義的函數 (fetchTypelist)
時,返回的實際上是一個 Promise
,而不是直接返回的數據。
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判斷瀏覽器運行環(huán)境的詳細方法
這篇文章主要給大家介紹了關于JavaScript判斷瀏覽器運行環(huán)境的詳細方法,文中通過示例代碼介紹的非常詳細,對大家學習或者使用JavaScript具有一定的參考學習價值,需要的朋友們下面來一起學習學習吧2019-06-06Javascript數組的排序 sort()方法和reverse()方法
JavaScript提供了sort()方法和reverse()方法,使得我們可以簡單的對數組進行排序操作和逆序操作2012-06-06解決canvas畫布使用fillRect()時高度出現(xiàn)雙倍效果的問題
下面小編就為大家?guī)硪黄鉀Qcanvas畫布使用fillRect()時高度出現(xiàn)雙倍效果的問題。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-08-08javascript中Date format(js日期格式化)方法小結
這篇文章主要介紹了javascript中Date format,即js日期格式化的方法.實例總結了三種常見的JavaScript日期格式化技巧,需要的朋友可以參考下2015-12-12