微信小程序-封装http请求（ajax）

最新推荐文章于 2025-06-23 17:27:52 发布

原创最新推荐文章于 2025-06-23 17:27:52 发布 · 6.1k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#微信 #微信小程序 #ajax #http

微信小程序专栏收录该内容

2 篇文章

订阅专栏

本文介绍了如何在微信小程序中封装HTTP请求，通过在app.js设置URL前缀，并在各个页面JS中引入，简化ajax调用流程。

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

官方api发起请求：

wx.request

进行封装：要进行一些公共处理,比如添加处理拦截等等

在app.js中声明url前缀

url: '请求ip地址',

声明ajax方法

ajax(model) {
    wx.showLoading({
      title: '加载中',
    })
    //拼接url
    model.url = this.url + model.url;
    //get参数拼接
    if (model.method == "get" && model.data !== undefined) {
      for (let k in model.data) {
        if (model.data[k].toString() !== '') {
          model.url = model.url + "&" + k + "=" + model.data[k];
        }
      }
      model.data='';
    }
    //返回Promise对象
    return new Promise(
      function (resolve) {
        wx.request({
          method: model.method,
          url: model.url,
          data: model.data,
          success: (res) => {
            wx.hideLoading()
            if (res.statusCode == 200) {
              resolve(res.data);
            } else {
              //错误信息处理
              wx.showModal({
                title: '提示',
                content: '服务器错误，请联系客服',
                showCancel: false,
              })
            }
          }
        })
      }
    )
  },

使用方法：

每个js头部引入

let $ = getApp()

    $.ajax({
      method: 'get',
      url: 'url',
      data: this.data.param
    }).then(response => {
      
    })

关于get使用data,个人只是觉得每次在url后面拼接参数很麻烦就进行了二次处理，按照post的data一样传入即可