微信小程序请求数据接口封装

---

前言

最近在写小程序项目，为了节约代码量，以及为了防止后期多处修改地址容易出问题或者遗漏，所以对数据请求进行了封装操作，具体操作如下。

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、方法参考站

1、微信小程序请求封装
2.、请求头设置

二、使用步骤

1.首先需要创建api文件夹，在文件夹里创建api.js文件

api.js 代码如下（示例）：

根据自己的数据需求更改调整即可

const app = getApp()

const request = (url, options) => {
  
  let header = {}
  if (options.method == 'POST') {
    header = {
      'content-type': 'application/x-www-form-urlencoded',
    }
  } else {
    header = {
      'content-type': 'application/json',
    }
  }
   return new Promise((resolve, reject) => {
       wx.request({
            // {app.globalData.host}为接口请求中的公共部分写在app.js中
           url: `${app.globalData.host}${url}`,
           method: options.method,
           data: options.method === 'GET' ? options.data : JSON.stringify(options.data) && options.method === 'POST' ? options.data : options.data,
           header: header,
           success(request) {
               if (request.data.code === '20000') {
                   resolve(request.data)
               } else {
                   reject(request.data)
               }
           },
           fail(error) {
               reject(error.data)
           }
       })
   })
}
 
const get = (url, options = {}) => {
   return request(url, { method: 'GET', data: options })
}
const post = (url, options) => {
   return request(url, { method: 'POST', data: options })
}
const put = (url, options) => {
   return request(url, { method: 'PUT', data: options })
}
// 不能声明DELETE（关键字）
const remove = (url, options) => {
   return request(url, { method: 'DELETE', data: options })
}
 
module.exports = {
   get,
   post,
   put,
   remove
}

2.修改app.js

app.js 代码如下（示例）：

//app.js

App({
  onLaunch: function () {},
  globalData: {
    host: "这里是你要访问的后端地址",
  },
  
})

3.页面里使用

在需要使用数据请求的页面.js文件里 代码如下（示例）：

import api from '../../api/api'  //根据你自己的路径引入文件
Page({
  /**
   * 页面的初始数据
   */
  data: {
    ewmImg:'',//二维码图片
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
   
    this.getewmImg()
  },
  // 获取二维码图片
  getewmImg('你要传输的数据'){
    var that = this
    api.post('/weixin/qrcode-img', '你要传输的数据').then(res => {
       that.setData({
          ewmImg:res.data.qrcodeimg
        })
    }).catch(err => {    
    })
  },
  
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})

---

总结

以上就是今天要记录的有关微信小程序请求接口封装问题的部分内容，文章仅仅为个人笔记所用，希望能帮助到有需要的人。