微信小程序（二十八）微信小程序封装request请求

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第21天，点击查看活动详情

公司项目开发新版小程序，为了http实现请求统一管理，我这里对微信的request请求使用promise进行一个统一的封装。

这样满足了我们对http请求的统一控制，统一更改

最重要的是减少了很多代码的重复量，减少了很多wx.request的使用

在封装request之前，建议各位看官移步wx.request以及promise的官方文档

《wx.request请点击这里》

《promise请点击这里》

一：封装：

Request 目录下文件如下图所示：

Request.js是封装的request请求的文件

const utils = require("../utils/util.js");
 
var app = getApp();
 
// 请求方式（定义完了又好像觉得没啥用，放着吧）
const GET = "GET";
const POST = "POST";
const PUT = "PUT";
const FORM = "FORM";
const DELETE = "DELETE";
 
// 系统域名
const baseURL = "https://www.mools.net";
 
/**
 * @name: 用户请求方法，使用promise实现
 * @author: camellia
 * @date: 2021-11-08
 * @param {*} method 请求方式
 * @param {*} url 请求连接
 * @param {*} data 请求数据
 */
const request = (method, url, data) => {
  return new Promise(function (resolve, reject) {
    let header = {
      "content-type": "application/json",
    };
    var requestData = data;
    if (method == "POST") {
      requestData = JSON.stringify(data);
    }
    // 展示loading效果
    // utils.showLoading("加载中……");
    // resolve 进success  reject 进fail
    wx.request({
      url: baseURL + url,
      method: method,
      data: requestData,
      header: header,
      success(result) {
        // console.log(result);
        //请求成功
        //判断状态码---errCode状态根据后端定义来判断
        if (result.data.code > 0)
        {
          // 返回值正常
          resolve(result);
          // 关闭loading效果
          // utils.hideLoading();
        }
        else if (result.data.code == -200)
        {
          // 系统错误
          utils.showToast(result.data.msg);return;
        }
        else if (result.data.code == -201)
        {
          // 登录失效
          app.userLogin();
        }
        else
        {
          // 其他异常
          resolve(result);
        }
      },
      fail(result)
      {//请求失败
        utils.hideLoading();
        resolve(result);
      },
      complete: () => {
        setTimeout(() => {
          // 关闭loading效果
          utils.hideLoading();
        }, 100);
      },
    });
  });
};
 
/**
 * @name: 上传文件，使用promise实现
 * @author: camellia
 * @date: 2021-11-23
 * @param {*} url 请求连接
 * @param {*} filePath 微信临时文件链接(数据流)
 * @param {*} sign 请求加密字符串
 * @param {*} params 加密参数
 */
const upload = (url,filePath,sign,params) => {
  return new Promise((resolve) => {
    wx.uploadFile({
      url: baseURL + url,
      filePath: filePath,
      formData: {
        'sign':JSON.stringify(sign),
        'params':JSON.stringify(params)
      },
      name: "file",
      success(res) {
        resolve(JSON.parse(res.data));
      },
    });
  });
};
 
/**
 * POST请求:(暂时没用上)
 * URL：接口
 * postData：参数，json类型
 * doSuccess：成功的回调函数
 * doFail：失败的回调函数
 */
const postData = (url, postData, doSuccess, doFail) => {
  wx.request({
    //项目的真正接口，通过字符串拼接方式实现
    url: host + url,
    // 这个header根据你的实际改！
    header: {
      "Content-Type": "application/json",
      cookie: config.httpToken,
      "Request-Origin": "app",
    },
    data: postData,
    method: "POST",
    success: function (res) {
      //参数值为res.data,直接将返回的数据传入
      if (res.data.result.token) {
        // 如果有token保存下来，下次请求带着token访问
        config.httpToken = res.data.result.token;
        // console.log("token--> ", config.httpToken);
      }
      doSuccess(res.data);
    },
    fail: function () {
      doFail();
    },
  });
};
 
/**
 * GET请求:(暂时没用上)
 * URL：接口
 * getData：参数，json类型
 * doSuccess：成功的回调函数
 * doFail：失败的回调函数
 */
const getData = (url, getData, doSuccess, doFail) => {
  wx.request({
    url: host + url,
    header: {
      "Content-Type": "application/json",
      "X-Access-Token": config.httpToken,
      "Request-Origin": "app",
    },
    method: "GET",
    data: getData,
    success: function (res) {
      doSuccess(res.data);
    },
    fail: function () {
      doFail();
    },
  });
};
 
module.exports = {
  request,
  upload,
  baseURL:baseURL
};
复制代码

这里说明一下，以上的代码，

使用promise封装了 wx.request请求以及wx. uploadFile请求

Api.js是编写统一请求接口的文件

// 引入请求方法
const request = require('./request.js').request;
// 上传
const upload = require("./request.js").upload;
/**
 * @name: 公共请求接口
 * @author: camellia
 * @date: 2021-11-15
 */
const API = {
  // 用户登录 / 注册
  userLogin: (data) => {
    return request('POST', `/xxxx/xxx/index.php/xxxx/userLogin`,data)
  },
  // 获取用户身份信息
  getUserInfoByUserid: (data) => {
    return request('POST', `/xxx/xxx/index.php/xxx/getUserInfoByUserid`,data)
  },
};
/**
 * @name: 导出
 * @author: camellia
 * @date: 2021-11-15
 */
module.exports = {
  API: API,
};
复制代码

以上就是我这里对wx.request以及wx.uploadFile的封装。

那么，这个玩意应该如何在使用中调用呢？

二：调用

1：首先我们在js中引入api.js下的API对象

// api 请求类
const API = require("./request/api.js").API;
复制代码

2：调用API对象下的请求

          // 调用接口用户登录 / 注册
          API.userLogin(data)
            .then((result) => {
              console.log(result);
              //请求成功
              // 如果用户没有头像或昵称跳转到授权页
              if (!result.data.avatarUrl || !result.data.nickName) {
                wx.reLaunch({
                  url: "/pages/grantAuth/grantAuth",
                });
              }
              // 隐藏加载
              wx.hideLoading();
            })
            .catch((result) => {
              //请求失败
            });
复制代码

以上大概就是对微信的request以及uploadFile请求的封装以及调用

有好的建议，请在下方输入你的评论

欢迎访问个人博客：guanchao.site

欢迎访问我的小程序：打开微信->发现->小程序->搜索“时间里的”

微信小程序（二十八）微信小程序封装request请求

猜你喜欢