微信小程序请求request封装

最新推荐文章于 2024-09-03 11:01:15 发布

WorkAndDebugger

最新推荐文章于 2024-09-03 11:01:15 发布

阅读量859

点赞数 1

分类专栏：微信小程序文章标签：微信小程序小程序

本文链接：https://blog.csdn.net/xiang_gong_ya_/article/details/139641735

版权

微信小程序专栏收录该内容

29 篇文章 0 订阅

订阅专栏

公共基础路径封装

在这里插入图片描述

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