快捷導(dǎo)航

微信小程序如何使用Promise對wx.request()封裝詳解(附完整代碼)

更新時(shí)間：2023年03月13日 09:27:16 作者：coderYYY

微信小程序的wx.request是微信小程序最早生成的數(shù)據(jù)庫傳輸模式,數(shù)據(jù)傳輸簡單明確,下面這篇文章主要給大家介紹了關(guān)于微信小程序如何使用Promise對wx.request()封裝的相關(guān)資料,需要的朋友可以參考下

1. 原生wx.request()的缺點(diǎn)

wx.request官網(wǎng)說明

回調(diào)地獄，可能會(huì)出現(xiàn)多層success套用的情況（用Promise封裝解決）
效率低，代碼冗雜，每次都要寫共同的參數(shù)（比如headers,公共的url）
可維護(hù)性差，后續(xù)查看和改代碼不方便，封裝后都在同一個(gè)文件，一目了然

wx.request({
  url: 'example.php', //僅為示例，并非真實(shí)的接口地址
  data: {
    x: '',
    y: ''
  },
  header: {
    'content-type': 'application/json' // 默認(rèn)值
  },
  success (res) {
    console.log(res.data)
  }
})

作為一個(gè)合格的前端開發(fā)，為了代碼質(zhì)量和可維護(hù)性（不是因?yàn)閼校?，肯定要對這種代碼進(jìn)行封裝，來讓我們的代碼變得更優(yōu)雅~~

2. 封裝思路

所有的封裝思路（無論是組件還是邏輯代碼），總結(jié)起來一句話就是抽取共性。

觀察我們的網(wǎng)絡(luò)請求代碼，可以發(fā)現(xiàn)，有很多是一樣的，如公共請求路徑、對響應(yīng)錯(cuò)誤的處理方法、headers參數(shù)（如token）。
不同的如具體的接口地址、請求類型、請求參數(shù)，我們封裝的時(shí)候把相同的抽取成一個(gè)文件，不同的地方再進(jìn)行傳參即可。

3. 具體實(shí)現(xiàn)代碼

先建一個(gè)api文件夾（叫什么都可以，但是為了規(guī)范化），在下面新建文件request.js

// ----http----
// api URL
const apiUrl = "https://接口地址:端口";// 公共的請求地址
// 封裝微信請求方法
const request = (params) => {
  let url = params.url;
  let data = params.data;
  let method = params.method;
  let header = {
    "Content-Type": "application/json"
  };

  // 鑒權(quán)驗(yàn)證，獲取登錄之后后端返回的token，存在即在頭部Authorization寫token，具體的看后端需求
  if (wx.getStorageSync("token")) {
    // header.Authorization = wx.getStorageSync("token");
    header.token = wx.getStorageSync("token");
  }
  return new Promise((resolve, reject) => {
    wx.request({
      url: apiUrl + url, // api url
      method: method, // get/post
      data: data, // 請求參數(shù)
      header: header, // 頭部
      success(res) {
        // 請求成功
        // 判斷狀態(tài)碼---errCode狀態(tài)根據(jù)后端定義來判斷
        if (res.statusCode < 399) {
          if (res.data.Code === 401) {
            wx.showModal({
              title: "提示",
              content: "請登錄",
              showCancel: false,
              success(res) {
                wx.navigateTo({
                  url: "/pages/login/login",
                });
              },
            });
            reject(res.data);
          }
          resolve(res.data);
        } else {
          // 其他異常
          switch (res.statusCode) {
            case 404:
              wx.showToast({
                title: '未知異常',
                duration: 2000,
              })
              break;
            default:
              wx.showToast({
                title: '請重試...',
                duration: 2000,
              })
              break;
          }
          reject("未知錯(cuò)誤,請稍后再試");
        }
      },
      fail(err) {
        if (err.errMsg.indexOf('request:fail') !== -1) {
          wx.showToast({
            title: '網(wǎng)絡(luò)異常',
            icon: "error",
            duration: 2000
          })
        } else {
          wx.showToast({
            title: '未知異常',
            duration: 2000
          })
        }
        reject(err);
      },
      complete() {
        wx.hideLoading()
      },
    });
  });
};

module.exports = {
  apiUrl,
  request,
}

然后再按業(yè)務(wù)需求，對具體的接口地址進(jìn)行封裝，比如，我這里在api文件夾下再新建一個(gè)user.js文件，里面放登錄，注冊的一些方法，請求類型和請求參數(shù)根據(jù)接口文檔寫。

import {
  request
} from "./request"


// 用戶相關(guān)

// 登錄
export const login = (params) => {
  return request({
    url: '/user/login',
    data: params,
    method: 'POST',
  })
}
// 注冊
export const register = (params) => {
  return request({
    url: '/user/reg',
    data: params,
    method: 'POST',
  })
}

正式在項(xiàng)目中使用：

import {
  login
} from '../../../api/user'
// 點(diǎn)擊登錄的方法
handleLogin(){
    login({
      name: xxx,
      password: xxx,
    }).then((res) => {
      if (res.code == 200) {
   		// 登錄成功之后的處理
      } else {
		// 登錄失敗的處理
      }
    }).catch((res) => {})
}