微信小程序promise封装

2023-12-22 16:48:20

一. 在utils文件夹内创建一个request.js? 写以下封装的?wx.request()?方法

const baseURL = 'https:// + '域名'; //公用总路径地址
export const request = (params) => {      //暴露出去一个函数,并且接收一个外部传入的参数

  let dataObj = params.data || {};   //拿到传递进来的参数
  let headerObj = {                  //这里 可以添加一些请求头
    'content-type': 'application/json'
  }

  return new Promise((resolve, reject) => {  //通过 Promise 对 wx.request 方法进行异步处理。
    wx.request({
      url: baseURL + params.url,      //通过默认的请求地址,再加上外部传入的 具体业务地址,组成一个完整的 请求地址。
      method: params.method || "GET",   //外部 业务调用请求时,并传入 所需的请求方法,如果没有传递请求方法,则默认为 GET 请求
      data: dataObj,                  //这里的参数,来自于外部传入的参数
      header: headerObj,
      success: res => {
        if (res.statusCode === 200) {
          resolve(res);                    // 请求成功后,调用 Promise 的回调 resolve() 方法,将参数返回出去到 Promise 的实例对象身上。
          wx.showToast({
            title: "请求成功",
            icon: "success"
          })
          return;
        } else {
          wx.showToast({
            title: "请求失败",
            icon: "error"
          })
          reject(res);    //同样请求失败后,向 Promise 实例返回出 错误的信息
        }
      },
      // fail: err => {
      //   reject(err)    //同样请求失败后,向 Promise 实例返回出 错误的信息
      // }
    })
  })
}

?二 . 在项目中,新建一个 API文件夹,用来做请求接口 模块化管理,这么做的原因是,虽然我们的请求接口封装了,但是整个项目中,调用接口的地方太多了,如果直接在各自页面中调用,也会显得代码十分的庸杂,所以不同的功能模块接口调用,为了避免混淆在一起,建议将api 请求接口 抽离出去,这样一来,页面的 js 部分就只着重于对发起请求前和请求响应后的数据逻辑处理。

api/index/js

import { request } from "../utils/request";  //导入我们封装的请求方法。

//首页请求接口
export const index = (params) => {     //接收页面调用传递过来的参数
  return request({   //调用请求方法
    url: "/api/science/index",   //传入请求地址
    method: "GET",               //传入请求方法
    data : params                //这里的参数来自于页面调用时,传过来的参数  
  })
}

三 . 必须配置服务器白域名 必须是https开头的

最后:在页面中,调用上述模块中相应的 api 接口,将参数依次传递过去,同时由于我们的请求方法是采用了?Promise?的方式封装的,所以在页面逻辑调用时,还可以 使用?async?和?await?的方式,将异步代码做同步化处理。

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

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

  /**
   * 页面的初始数据
   */
  data: {

  },

  async getdatas() {
    let parameter = {}         //页面中,收集处理好,要传递的参数
    let data = await index(parameter);
    console.log(data);
    //data 身上就可以直接拿到,请求回来的数据。
    // if (data.statusCode === 200) {
    //   wx.showToast({
    //     title: "首页加载成功",
    //     icon: "success"
    //   })
    // }
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    this.getdatas();
  },

  
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})

原创作者:吴小糖

创作时间:2023.12.22

文章来源:https://blog.csdn.net/xiaowude_boke/article/details/135153831
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。