第147篇：微信小程式開發中Promise的使用(aysnc,await)

好傢伙,

0.錯誤描述

今天在開發中犯了一個比較嚴重的錯誤

對於Promise的錯誤使用

場景:

微信小程式中展示搜尋條件列表

// 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`;

  // 新增常規的查詢引數
  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)

猜猜會列印什麼?

一個promise是的僅僅只是一個promise,並沒有拿到請求返回的結果

1.分析

async 函式預設返回一個 Promise，即使你在 async 函式中顯式返回了值。

當你呼叫 async定義的函式 (fetchTypelist) 時，返回的實際上是一個 Promise，而不是直接返回的資料。

2.解決方法

2.1.使用await等待方法的執行，獲取返回值

const getTypelist = async () => {
  try {
    const typelist = await fetchTypelist();
    console.log(typelist); // 這裡可以獲取到返回的 rows
  } catch (error) {
    console.error(error); // 處理錯誤
  }
};

2.2.使用鏈式呼叫.then()來處理promise

fetchTypelist()
  .then((typelist) => {
    console.log(typelist);
  })
  .catch((error) => {
    console.error(error);
  });

3.成功獲取