微信小程序与uniapp中的请求封装：wxRequest

2023-09-14 00:50:47

引言

微信小程序和uniapp都是移动端开发框架，在使用HTTP请求时，可以通过封装请求来简化开发，增强程序健壮性，让开发者专注于业务逻辑。本文将介绍如何使用wxRequest来封装微信小程序和uniapp中的HTTP请求。

wxRequest的优势

简化请求： 封装请求参数，简化HTTP请求的编写。
健壮性： 统一处理错误和异常，增强程序的健壮性。
集中管理： 集中管理请求配置，方便维护和更新。
提高效率： 通过预定义的请求模板，提高开发效率。

如何使用wxRequest

// 封装GET请求
wxRequest({
  url: 'https://example.com/api/get',
  success: (res) => {
    console.log(res.data)
  }
})

// 封装POST请求
wxRequest({
  url: 'https://example.com/api/post',
  method: 'POST',
  data: {
    name: 'John',
    age: 30
  },
  success: (res) => {
    console.log(res.data)
  }
})

配置选项

wxRequest提供了丰富的配置选项，包括：

url：请求地址
method：请求方法（GET、POST、PUT、DELETE）
data：请求参数（JSON格式）
header：请求头
success：请求成功回调
fail：请求失败回调
complete：请求完成回调

示例

封装微信小程序中的HTTP请求：

const { wxRequest } = require('@/utils/http.js')

wxRequest({
  url: 'https://example.com/api/get',
  success: (res) => {
    console.log(res.data)
  }
})

封装uniapp中的HTTP请求：

import { wxRequest } from '@uni-util/http.js'

wxRequest({
  url: 'https://example.com/api/get',
  success: (res) => {
    console.log(res.data)
  }
})

RESTful API封装

wxRequest还支持对RESTful API进行封装，只需在配置选项中指定对应的HTTP方法即可。例如：

// 获取资源
wxRequest({
  url: 'https://example.com/api/users',
  method: 'GET'
})

// 创建资源
wxRequest({
  url: 'https://example.com/api/users',
  method: 'POST'
})

// 更新资源
wxRequest({
  url: 'https://example.com/api/users/1',
  method: 'PUT'
})

// 删除资源
wxRequest({
  url: 'https://example.com/api/users/1',
  method: 'DELETE'
})