微信小程序封装request请求

我的个人刷Java面试题网站:http://www.study-java.cn/

在小程序开发中,通过接口获取后台数据,这时候我们不得不在每个页面的js文件中写到:wx.request({

url:'',.....}) 但是调用很多接口的时候,会非常频繁的使用request,作为一名java开发人员,显然我们需要对他进行一下封装:

 

1.在utils同级目录下建立service

2.typeof cb == "function" && cb(res.data) 我的理解是

利用的&&的运算规律,首先判断cb是不是一个方法, 这里的==可以作为类型是否相当的判断,然后在&&中如果前面的不满足,

后面的则不会执行;如果是cb是一个方法,调用cb方法,并且传入success成功回调的userinfo参数

并且return 的是回调函数,而不是具体的数据

 

var rootDocment = 'https://xxxxxxxxxxxxx/';
var header = {
  'Accept': 'application/json',
  'content-type': 'application/json',
  'Authorization': null,
}
function getReq(url, cb) {
  wx.showLoading({
    title: '加载中',
  })
  console.log("header=="),
    console.log(header)
  wx.request({
    url: rootDocment + url,
    method: 'get',
    header: header,
    success: function (res) {
      wx.hideLoading();
      return typeof cb == "function" && cb(res.data)
    },
    fail: function () {
      wx.hideLoading();
      wx.showModal({
        title: '网络错误',
        content: '网络出错,请刷新重试',
        showCancel: false
      })
      return typeof cb == "function" && cb(false)
    }
  })
}

function postReq(url, data, cb) {
  wx.showLoading({
    title: '加载中',
  })
    console.log("header=="),
    console.log(header),
    wx.request({
      url: rootDocment + url,
      header: header,
      data: data,
      method: 'post',
      success: function (res) {
        wx.hideLoading();
        return typeof cb == "function" && cb(res.data)
      },
      fail: function () {
        wx.hideLoading();
        wx.showModal({
          title: '网络错误',
          content: '网络出错,请刷新重试',
          showCancel: false
        })
        return typeof cb == "function" && cb(false)
      }
    })

}
module.exports = {
  getReq: getReq,
  postReq: postReq,
  header: header,
}  

header 中的一些数据可能是需要在app.js中登录后返回的Token,这时候我们需要在app.js中

var http = require('service/http.js')

http.header.Authorization = 'Bearer '+res.data;//给header 赋值

// 将方法暴露出去

getReq: http.getReq,

postReq: http.postReq,


使用:

    http.getReq("item/getshopbanner/"+getApp().globalData.shopIdx,function(res){
                      console.log("banner==")
                      console.log(res)
                    })

更多文章请关注公众号:每天学Java。想获得更多最新面试提醒请进入小程序:每天学Java

 公众号二维码:                                                                                          小程序二维码:

                       

<think>我们参考多个引用,特别是引用[5]中提供了详细的代码示例。封装request方法主要是为了简化HTTP请求的调用,处理统一逻辑(如错误处理、401验证等),并返回Promise以便于使用async/await或.then()处理异步操作。根据引用[5]的示例,我们可以在微信小程序的utils文件夹下创建一个文件(如request.js),然后编写一个封装函数。该函数接收url、method、data和header等参数,并返回一个Promise对象。下面是一个详细的实现步骤:1.在utils目录下创建request.js文件。2.编写sendRequest函数,使用wx.request发起请求。3.在函数内部,可以添加统一的处理逻辑,例如对401状态码的处理(需要根据实际业务调整)。4.导出sendRequest函数,以便在其他地方使用。同时,我们也可以参考引用[3]的做法,将封装request方法挂载到全局变量中,这样可以在任何页面直接使用。下面是一个具体的代码示例:</think>### 微信小程序封装 request 方法示例 在微信小程序封装网络请求可提高代码复用性、统一错误处理并简化调用流程。以下是完整实现方案: #### 1. 基础封装(utils/request.js) ```javascript // utils/request.js const request = (options) => { // 添加统一前缀(可选) const baseURL = 'https://your-api-domain.com/api/v1'; const url = options.url.startsWith('http') ? options.url : baseURL + options.url; return new Promise((resolve, reject) => { wx.request({ ...options, url, header: { 'content-type': 'application/json', 'Authorization': wx.getStorageSync('token') || '', // 自动添加token ...options.header }, success: (res) => { if (res.statusCode === 200) { resolve(res.data); // 仅返回业务数据 } else if (res.statusCode === 401) { // 统一处理未授权 wx.navigateTo({ url: '/pages/login/login' }); reject(new Error('未授权,请重新登录')); } else { reject(new Error(`请求失败: ${res.statusCode}`)); } }, fail: (err) => { wx.showToast({ title: '网络异常', icon: 'none' }); reject(err); } }); }); }; export default request; ``` #### 2. 全局挂载(app.js) ```javascript // app.js import request from './utils/request'; App({ globalData: { request // 挂载到全局 }, // 其他初始化逻辑... }); ``` #### 3. 页面调用示例 ```javascript // pages/home/home.js const app = getApp(); Page({ loadData() { app.globalData.request({ url: '/user/profile', method: 'GET' }) .then(data => { console.log('请求成功', data); }) .catch(err => { console.error('请求失败', err); }); }, // 使用async/await async submitForm() { try { const res = await app.globalData.request({ url: '/submit', method: 'POST', data: { name: '张三' } }); wx.showToast({ title: '提交成功' }); } catch (error) { wx.showToast({ title: error.message, icon: 'none' }); } } }); ``` #### 关键特性说明 1. **自动鉴权** 每次请求自动携带 `Authorization` 头,从本地存储获取 token [^3] 2. **统一错误处理** - 401 状态码自动跳转登录页 - 网络错误显示 toast 提示 - 非 200 状态码抛出错误 [^5] 3. **API 路径管理** 通过 `baseURL` 统一管理接口前缀,避免硬编码 [^1] 4. **Promise 封装** 支持 `.then()` 和 `async/await` 两种调用方式 [^5] 5. **灵活扩展** 保留 `options` 原参数传递能力,支持自定义 header/超时等配置 [^2][^4] --- ### 优化建议 1. **添加请求拦截器** 可在请求统一显示 loading 动画 ```javascript // 在request函数开头添加 wx.showLoading({ title: '加载中', mask: true }); // 在success/fail的finally中隐藏 wx.hideLoading(); ``` 2. **响应结构标准化** 处理后端统一响应格式(如 `{ code: 0, data: {}, message: '' }`) 3. **超时控制** 在 `wx.request` 配置中添加 `timeout: 10000` 防止长时间等待 4. **重试机制** 对特定错误(如网络波动)自动重试请求 --- ### 相关问题 1. 如何在小程序中实现自动刷新过期的 token? 2. 封装后的 request 如何支持文件上传功能? 3. 如何处理小程序中的并发请求和竞态条件? 4. 如何为不同环境(开发/生产)配置不同的 baseURL? [^1]: 使用 JavaScript 编写的原生微信小程序封装 request 方法 [^2]: 微信小程序 request 请求封装 [^3]: 微信小程序封装 request 请求、解决请求路径问题 [^4]: 微信小程序 request 封装 [^5]: 微信小程序封装 request 方法
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值