微信小程序HTTP接口请求封装

最近在学习小程序的HTTP接口请求封装编写，需要调用后端接口，经常要用到wx.request方法，所以就自己封装了一下，简化一下代码，

1.方法封装（新建文件夹util，工具文件，在文件夹下创建request.js文件，用于对方法封装） request.js：

第一步在 request.js里面写入

var app = getApp();
项目URL相同部分，减轻代码量，同时方便项目迁移
这里因为我是本地调试，所以host不规范，实际上应该是你备案的域名信息

## 域名的信息
var host = 'https://api.it120.cc';

请求的返回
 * POST请求，
 * URL：接口
 * postData：参数，json类型
 * doSuccess：成功的回调函数
 * doFail：失败的回调函数

function request(ulr， doSuccess) {
  wx.request({
###    项目的真正接口，通过字符串拼接方式实现
    url: host + url,
    header: {
      "content-type": "application/json;charset=UTF-8"
    },
### 请求方程 GET ，PORST
    method: 'GET',
    success: function (res) {
      参数值为res.data,直接将返回的数据传入
      doSuccess(res.data);
    },
    fail: function () {
      doFail();
    },
  })
}

GET请求，不需传参，直接URL调用，
function getData(url, doSuccess, doFail) {
  wx.request({
    url: host + url,
    header: {
      "content-type": "application/json;charset=UTF-8"
    },
    method: 'GET',
    success: function (res) {
      doSuccess(res.data);
    }
   
  })
}

/**
 * js文件中通过var call = require("../util/request.js")  加载

 */
##  第二步* module.exports用来导出代码
module.exports.getData = getData;
module.exports.request = request;



第三步在项目car.js里面加入

 1. 在引入引入文件的时候"  "里面的内容通过../../../这种类型，小程序的编译器会自动提示，因为你可能
 2. 项目目录不止一级，不同的js文件对应的工具类的位置不一样

//引入代码
var call = require("../../util/request.js")

Page({
  data: {
    pictureList: [],
  },
  
  onLoad: function () {
   
     // 第四步 在onLoad: function  在调用封装的方法，直接在页面加载的时候执行这个方法
   // ##### 商品列表 https://api.it120.cc/jh0927/shop/goods/list
               //端口号
   call.getData('/jh0927/shop/goods/list', this.success);
   
  },
 success(res){
         this.wrklist = res.data
         //更新视图 。
        this.setData({
          wrklist: this.wrklist
        })
  },
  

本文地址：https://blog.csdn.net/weibaobao1314/article/details/107900622