微信小程序(二十八)微信小程序封装request请求

·  阅读 2438
微信小程序(二十八)微信小程序封装request请求

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

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

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

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

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

wx.request请点击这里

promise请点击这里

  一:封装:

在项目根目录下创建request目录:

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

a.png

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",
    successfunction (res) {
      //参数值为res.data,直接将返回的数据传入
      if (res.data.result.token) {
        // 如果有token保存下来,下次请求带着token访问
        config.httpToken = res.data.result.token;
        // console.log("token--> ", config.httpToken);
      }
      doSuccess(res.data);
    },
    failfunction () {
      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,
    successfunction (res) {
      doSuccess(res.data);
    },
    failfunction () {
      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 = {
  APIAPI,
};
复制代码

 

以上就是我这里对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

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

收藏成功!
已添加到「」, 点击更改