微信小程序封装网络接口请求

381 阅读1分钟

一. 前言

在做小程序开发的时候难免会涉及到网络请求操作,小程序提供的原生网络请求已经不能够满足我们的需求,需要对其进行封装,做出优化

二. 实现流程

1. 创建request文件夹,创建http.js文件

image.png

2. 代码注释及详解

  • 本次封装仅涉及加载动画及提示,更多功能可以依照项目实际开发自行添加
// 定义基准路径
const baseUrl = '此处为基准路径'
// 抛出request方法   url---路径, method---请求方式, data---参数
export const request = function (url, method, data) {
  // 返回Promise实例
  return new Promise((reslove, reject) => {
    // 开启加载动画
    wx.showLoading({
      title: '加载中...',
    })
    // 请求接口
    wx.request({
      // 基准路径 + 接口路径
      url: baseUrl + url,
      // 使用'GET'或传入请求方式
      method: method || 'GET',
      // 空对象或传入参数
      data: data || {},
      // 请求成功
      success(res) {
        // 抛出成功数据
        reslove(res)
        // 成功提示信息  此处可与成功返回数据互通  以实际开发为准
        wx.showToast({
          title: '123',
        })
        // 关闭加载动画
        wx.hideLoading()
      },
      // 请求失败
      fail(err) {
        // 抛出失败数据
        reject(err)
        // 失败提示信息  此处可与失败返回数据互通  以实际开发为准
        wx.showToast({
          title: '加载失败,请重试',
        })
        // 关闭加载动画
        wx.hideLoading()
      }
    })
  })
}

3. 页面调用及使用

  • 页面调用 通过 require() 方法引用

image.png

  • 定义方法 , 使用引用的方法即可
  reqUser() {
    request(接口路径, 'GET', 接口参数).then(res => {
      console.log(res);
    })
  },