小程序原生 请求封装

提取原因

小程序提供了wx.request之类的方法，但是比如异步改为同步。

const {code,data}=await xx()
if(code=200){}

以上就为正常的js顺序（js中分为异步和同步，简单理解就是顺序执行，先来后到即为同步）则不支持。
且各种状态码200,403统一拦截，get/put/del/update万一后台统一规范很是头大。
为了一劳永逸，省心又省代码所以有了提取（封装说法也成）。
目录结构：

image.png

api 请求相关
api 每个接口在线地址
request 提取的get、post之类请求
public 多为公共的方法比如日期上传之类，一般也为utils工具名

api目录下

api.js

const requestFn = require("./request");

const API = {
  //  获取链接地址
  getUrl: "/xx/getUrl",
};

const HTTP = {
  /**
   * banner
   * @param {String} userId - 用户ID
   * @param {String} appClientTypeCode - 设备端类型DICT_APP_CLIENT_TYPE_CODE_ANDROID（安卓DICT_APP_CLIENT_TYPE_CODE_IOS（苹果）
   */

  getUrl(data) {
    return requestFn.Request({
      url: API.getUrl,
      data,
    // method:'GET',不传默认'POST'
    });
  },
};

module.exports = HTTP;

request.js
尤其注意两句注释，不能漏看。

const app = getApp();
const baseURL = app.globalData.baseURL;
const FN = require('../public/public');

const Request = (options) =>{
  return new Promise((resolve, reject) => {
    FN.Loading(1);
    wx.request({
      url: baseURL + options.url || '',
      data: options.data || {},
      method: options.method || 'POST',
      header:{'content-type': "application/x-www-form-urlencoded"},
      responseType:options.responseType || "",
      timeout:15000,
      success (res) {
        FN.LoadingOff();
    // 根据打印的res具体返回具体修改调整下，比如res.data.status不一定等于xx
   //  返回的提示信息也不一定是info,也可能后台返回为msg
        if(res.statusCode === 200){
          if(res.data.status === "xx"){
            resolve(res.data);
          }else{
            FN.Toast(res.data.info);
          };
        }else{
          FN.Toast(res.errMsg);
        };
      },
      fail (res) {
        FN.Toast("网络开小差了");
        reject(res);
      }
    })
  })
};

module.exports = {
  Request
};

使用页面

import Http from "../../../api/api.js";
console.log('role',Http)
// 路径非唯一自行调整
onLoad() {
Http.getStudentInfo({
      code:1
    }).then((res) => {
      console.log(res)
    }).catch(err=>{
      console.log('错误',err)
 })
}

catch和then涉及promise语法中的resolve和reject，为语法糖（没有任何意义的标识，比如p约定俗称为标签一样，代表通过或拒绝），此为es6语法，第一段代码中可用es后续es async和await提升美化度。
原文参考：
ps：https://www.cnblogs.com/-pdd/p/14292614.html