微信小程序wx.request封装

1.用 class 定义 request 的get、post、put、delete四个常用的查增改删方法, 参数使用和 axios 一样的参数格式。

Request

class Request {
  constructor(parms) {
    this.withBaseURL = parms.withBaseURL;
    this.baseURL = parms.baseURL;
  }
  get(url, data, customParams) {
    return this.request("GET", url, data, customParams);
  }
  post(url, data, customParams) {
    return this.request("POST", url, data, customParams);
  }
  put(url, data, customParams) {
    return this.request("PUT", url, data, customParams);
  }
  delete(url, data, customParams) {
    return this.request("DELETE", url, data, customParams);
  }
  request(method, url, data, customParams = {}) {
    const vm = this;
    const withBaseURL = _.startsWith(url, "http") ? false : vm.withBaseURL;
    return new Promise((resolve, reject) => {
      wx.request({
        url: withBaseURL ? vm.baseURL + url : url,
        data,
        method,
        header: {
          Cookie: wx.getStorageSync("Cookie"),
        },
        ...customParams,
        success(res) {
          setCookie(res);
          const statusCode = res.statusCode;
          if (statusCode !== 200) {
            reject({
              statusCode: statusCode,
              msg: "请求失败",
              url: withBaseURL ? vm.baseURL + url : url,
              method,
              data,
              err: _.get(res, "data"),
            });
          } else {
            resolve(res);
          }
        },
        fail(err) {
          reject({
            msg: "请求失败",
            url: vm.withBaseURL ? vm.baseURL + url : url,
            method,
            data,
            err: err,
          });
        },
      });
    });
  }
}

2. 在/utils/utils.js（名字和路径可以随意，只要用的时候 require 对应的 js 文件就可以）导出封装完毕的commonRequest（名字随意）方法

export custom request method

const commonRequest = new Request({
  baseURL: commonApiUrl,
  withBaseURL: true,
});

module.exports = {
  commonRequest,
};

3. 在你的 js 中使用commonRequest

use your custom request

const utils = require("/utils/utils.js");

Component({
  data: {
    result: null,
  },
  ready() {
    this.getData();
  },
  methods: {
    getData() {
      utils.commonRequest
        .get("/api/getsomedata")
        .then((res) => {
          this.setData({
            result: res.data,
          });
        })
        .catch((err) => {
          // handle your err
        });
    },
  },
});

---

配合另一篇文章的 setCookie 使用。

完整的 utils.js 代码如下

const _ = require("./lodash");

class Request {
  constructor(parms) {
    this.withBaseURL = parms.withBaseURL;
    this.baseURL = parms.baseURL;
  }
  get(url, data, customParams) {
    return this.request("GET", url, data, customParams);
  }
  post(url, data, customParams) {
    return this.request("POST", url, data, customParams);
  }
  put(url, data, customParams) {
    return this.request("PUT", url, data, customParams);
  }
  delete(url, data, customParams) {
    return this.request("DELETE", url, data, customParams);
  }
  request(method, url, data, customParams = {}) {
    const vm = this;
    const withBaseURL = _.startsWith(url, "http") ? false : vm.withBaseURL;
    return new Promise((resolve, reject) => {
      wx.request({
        url: withBaseURL ? vm.baseURL + url : url,
        data,
        method,
        header: {
          Cookie: wx.getStorageSync("Cookie"),
        },
        // customParams这里放自定义的request额外参数，默认为空
        ...customParams,
        success(res) {
          setCookie(res);
          const statusCode = res.statusCode;
          if (statusCode !== 200) {
            reject({
              statusCode: statusCode,
              msg: "请求失败",
              url: withBaseURL ? vm.baseURL + url : url,
              method,
              data,
              err: _.get(res, "data"),
            });
          } else {
            resolve(res);
          }
        },
        fail(err) {
          reject({
            msg: "请求失败",
            url: vm.withBaseURL ? vm.baseURL + url : url,
            method,
            data,
            err: err,
          });
        },
      });
    });
  }
}

const mode = "dev";

const apiUrl = `https://${mode === "prod" ? "" : mode}api.yoursite.com`;

const commonRequest = new Request({
  baseURL: apiUrl,
  withBaseURL: true,
});

const setCookie = (data) => {
  let cookieArr = [];
  if (_.get(data, `header['Set-Cookie']`)) {
    const cookieOriArr =
      data.header["Set-Cookie"].match(/([\w\-.]*)=([^\s=]+);/g) || [];
    _.forEach(cookieOriArr, (str) => {
      if (!/path=|domain=|samesite=|max-age=/gi.test(str)) {
        cookieArr.push(
          _.endsWith(str, ";") ? str.substring(0, str.length - 1) : str
        );
      }
    });

    let localCookie = wx.getStorageSync("Cookie") || "";
    let CookieObj = {};
    const localCookieArr = localCookie.split(";") || [];

    _.forEach(_.compact(localCookieArr), (item) => {
      const cookieItem = item.split("=");
      CookieObj[cookieItem[0]] = cookieItem[1];
    });

    _.forEach(_.compact(cookieArr), (item) => {
      const cookieItem = item.split("=");
      CookieObj[cookieItem[0]] = cookieItem[1];
    });

    const CookieStr = _.map(_.keys(CookieObj), (key) => {
      return `${key}=${CookieObj[key]}`;
    }).join(";");
    wx.setStorageSync("Cookie", CookieStr);
  }
};

module.exports = {
  commonRequest,
  setCookie,
};