微信小程序请求request封装

公共基础路径封装

javascript 复制代码
// config.js
module.exports = {
  // 测试
  BASE_URL: 'https://cloud.chejj.cn',
  // 正式
  // BASE_URL: 'https://cloud.mycjj.com'
};

请求封装

javascript 复制代码
// request.js
import config from '../config/baseUrl'

// 请求未返回时的loading
const showLoading = () => wx.showLoading({
  title: '加载中...'
});
const hideLoading = () => wx.hideLoading();

// 封装的请求函数
export function request(url, method = 'GET', data = {}) {
  let fullUrl = config.BASE_URL + url;

  return new Promise((resolve, reject) => {
    showLoading(); // 显示加载提示

    wx.request({
      url: fullUrl,
      method: method,
      data: data,
      header: {
        'content-type': 'application/json', // 默认值
        // 'Authorization': 'Bearer ' + token
        // 'Bearer '是一个常见的前缀,表示你使用的认证方案是Bearer Token,这是OAuth 2.0中常用的认证方式。如果你的API要求或允许不同的认证方案,那么前缀应做相应调整或省略。
      },
      success: (res) => {
        if (res.statusCode === 200 && res.data.success) {
          hideLoading(); // 请求成功后隐藏加载提示

          resolve(res.data.data); // 返回实际数据部分
        } else {
          hideLoading(); // 即便请求失败,也要隐藏加载提示

          // 错误提示
          wx.showToast({
            title: res.data.msg,
            icon: 'error'
          })

          reject(res.data.msg || '请求失败'); // 错误处理
        }
      },
      fail: (err) => {
        hideLoading(); // 失败时隐藏加载提示

        reject(err.errMsg || '网络请求失败');
      }
    });
  });
}

页面使用

javascript 复制代码
  async fetchData() {
    try {
      // 也可以点then
      const result = await request('/mini/default', 'get', {});
      console.log('请求成功,数据为:', result);
      // 处理数据,如设置到页面数据中
      this.setData({
        data: result
      });
    } catch (error) {
      console.error('请求失败:', error);
      // 可以在这里处理错误提示给用户
    }
  },
相关推荐
尚梦3 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
小飞哥liac6 小时前
微信小程序的组件
微信小程序
stormjun7 小时前
Java基于微信小程序的私家车位共享系统(附源码,文档)
java·微信小程序·共享停车位·私家车共享停车位小程序·停车位共享
paopaokaka_luck7 小时前
基于Spring Boot+Vue的助农销售平台(协同过滤算法、限流算法、支付宝沙盒支付、实时聊天、图形化分析)
java·spring boot·小程序·毕业设计·mybatis·1024程序员节
Bessie2349 小时前
微信小程序eval无法使用的替代方案
微信小程序·小程序·uni-app
shenweihong10 小时前
javascript实现md5算法(支持微信小程序),可分多次计算
javascript·算法·微信小程序
蜕变菜鸟10 小时前
小程序跳转另一个小程序
小程序
13 小时前
躺平成长-代码开发,利用kimi开发小程序(09)
小程序
16 小时前
微信小程序运营日记(第四天)
微信小程序·小程序
guanpinkeji16 小时前
旧衣回收小程序:提高回收效率,扩大服务范围
大数据·小程序·团队开发·软件开发·小程序开发·旧衣回收·旧衣回收小程序