当前位置：首页 > news >正文

微信小程序请求request封装

news 2025/8/17 4:43:52

公共基础路径封装

在这里插入图片描述

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

请求封装

在这里插入图片描述

// 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 || '网络请求失败');}});});
}

页面使用

  async fetchData() {try {// 也可以点thenconst result = await request('/mini/default', 'get', {});console.log('请求成功，数据为：', result);// 处理数据，如设置到页面数据中this.setData({data: result});} catch (error) {console.error('请求失败：', error);// 可以在这里处理错误提示给用户}},