一. 在utils文件夾內(nèi)創(chuàng)建一個(gè)request.js? 寫(xiě)以下封裝的?wx.request()?方法

const baseURL = 'https:// +  '域名' '; //公用總路徑地址
export const request = (params) => {      //暴露出去一個(gè)函數(shù)，并且接收一個(gè)外部傳入的參數(shù)

  let dataObj = params.data || {};   //拿到傳遞進(jìn)來(lái)的參數(shù)
  let headerObj = {                  //這里 可以添加一些請(qǐng)求頭
    'content-type': 'application/json'
  }

  return new Promise((resolve, reject) => {  //通過(guò) Promise 對(duì) wx.request 方法進(jìn)行異步處理。
    wx.request({
      url: baseURL + params.url,      //通過(guò)默認(rèn)的請(qǐng)求地址，再加上外部傳入的 具體業(yè)務(wù)地址，組成一個(gè)完整的 請(qǐng)求地址。
      method: params.method || "GET",   //外部 業(yè)務(wù)調(diào)用請(qǐng)求時(shí)，并傳入 所需的請(qǐng)求方法，如果沒(méi)有傳遞請(qǐng)求方法，則默認(rèn)為 GET 請(qǐng)求
      data: dataObj,                  //這里的參數(shù)，來(lái)自于外部傳入的參數(shù)
      header: headerObj,
      success: res => {
        if (res.statusCode === 200) {
          resolve(res);                    // 請(qǐng)求成功后，調(diào)用 Promise 的回調(diào) resolve() 方法，將參數(shù)返回出去到 Promise 的實(shí)例對(duì)象身上。
          wx.showToast({
            title: "請(qǐng)求成功",
            icon: "success"
          })
          return;
        } else {
          wx.showToast({
            title: "請(qǐng)求失敗",
            icon: "error"
          })
          reject(res);    //同樣請(qǐng)求失敗后，向 Promise 實(shí)例返回出 錯(cuò)誤的信息
        }
      },
      // fail: err => {
      //   reject(err)    //同樣請(qǐng)求失敗后，向 Promise 實(shí)例返回出 錯(cuò)誤的信息
      // }
    })
  })
}

?二 . 在項(xiàng)目中，新建一個(gè) API文件夾，用來(lái)做請(qǐng)求接口 模塊化管理，這么做的原因是，雖然我們的請(qǐng)求接口封裝了，但是整個(gè)項(xiàng)目中，調(diào)用接口的地方太多了，如果直接在各自頁(yè)面中調(diào)用，也會(huì)顯得代碼十分的庸雜，所以不同的功能模塊接口調(diào)用，為了避免混淆在一起，建議將api 請(qǐng)求接口 抽離出去，這樣一來(lái)，頁(yè)面的 js 部分就只著重于對(duì)發(fā)起請(qǐng)求前和請(qǐng)求響應(yīng)后的數(shù)據(jù)邏輯處理。

api/index/js

import { request } from "../utils/request";  //導(dǎo)入我們封裝的請(qǐng)求方法。

//首頁(yè)請(qǐng)求接口
export const index = (params) => {     //接收頁(yè)面調(diào)用傳遞過(guò)來(lái)的參數(shù)
  return request({   //調(diào)用請(qǐng)求方法
    url: "/api/science/index",   //傳入請(qǐng)求地址
    method: "GET",               //傳入請(qǐng)求方法
    data : params                //這里的參數(shù)來(lái)自于頁(yè)面調(diào)用時(shí)，傳過(guò)來(lái)的參數(shù)  
  })
}

三 . 必須配置服務(wù)器白域名 必須是https開(kāi)頭的

最后：在頁(yè)面中，調(diào)用上述模塊中相應(yīng)的 api 接口，將參數(shù)依次傳遞過(guò)去，同時(shí)由于我們的請(qǐng)求方法是采用了?Promise?的方式封裝的，所以在頁(yè)面邏輯調(diào)用時(shí)，還可以 使用?async?和?await?的方式，將異步代碼做同步化處理。

// const { from } = require("form-data");
import {index} from '../../api/index.js';

// pages/demos/demos.js
Page({

  /**
   * 頁(yè)面的初始數(shù)據(jù)
   */
  data: {

  },

  async getdatas() {
    let parameter = {}         //頁(yè)面中，收集處理好，要傳遞的參數(shù)
    let data = await index(parameter);
    console.log(data);
    //data 身上就可以直接拿到，請(qǐng)求回來(lái)的數(shù)據(jù)。
    // if (data.statusCode === 200) {
    //   wx.showToast({
    //     title: "首頁(yè)加載成功",
    //     icon: "success"
    //   })
    // }
  },

  /**
   * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面加載
   */
  onLoad(options) {
    this.getdatas();
  },

  
  /**
   * 用戶點(diǎn)擊右上角分享
   */
  onShareAppMessage() {

  }
})

原創(chuàng)作者：吳小糖

創(chuàng)作時(shí)間：2023.12.22文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-769649.html

到了這里，關(guān)于微信小程序promise封裝的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！