微信小程序网络请求的封装（request）_微信小程序 request封装-优快云博客

本文链接：https://blog.youkuaiyun.com/wangming0123/article/details/115299722

本文介绍如何在微信小程序中使用http.js封装HTTP请求，通过`apiSwiperData`示例展示如何调用API获取轮播图数据，并导出供多个页面复用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

request的封装，这部分是每次请求的必经之路

http.js

const pubUrl = "https://api-hmugo-web.itheima.net/api/public/v1"//这是我要请求的数据接口的公共部分
const http = (options) =>{
  return new Promise((resolve,reject) => {
    wx.request({
      url: pubUrl+options.url,
      method:options.method || 'get',
      data:options.data || {},
      header: options.header || {
        'content-type':'application/x-www-form-urlencoded'
      },
      success:resolve,
      fail:reject
    })
  })
}
export default http

index.js 各个页面的具体请求api设置

import http from '../request/http.js' //引入上面封装好的请求方法
// 获取轮播图
const apiSwiperData = () => {
  return http({
    url:'/home/swiperdata'
  })
}
// 将方法导出，实现复用
export default{
  apiSwiperData,
  }

在页面使用

import Api from '../../request/index.js' //首先要引入封装好的上述api文件，路径根据自己文件的位置

 data: {
    swiperList: []
  },
  
  async apiSwiperData(){ //在需要请求接口获取数据的方法中调用api中的方法
    let result = await Api.apiSwiperData();
    this.setData({swiperList: result.data.message})
  },
  //在then方法里面操作
     await Api.apiCategories().then((res) => {
      this.setData({
        Cates: res.data.message
      })
    });
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.apiSwiperData()
  },