当前位置：首页 > article >正文

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

article 2024/9/24 15:27:35

文章目录

前言
一、方法参考站
二、使用步骤
- 1.首先需要创建api文件夹，在文件夹里创建api.js文件
- 2.修改app.js
- 3.页面里使用
总结

前言

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

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

一、方法参考站

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() {

  }
})