【愚公系列】《微信小程序开发解析》014-网络API

愚公搬代码

已于 2024-08-06 01:15:49 修改

阅读量1.9w

点赞数 22

分类专栏：愚公系列-书籍专栏文章标签：微信小程序小程序

于 2024-07-16 23:47:41 首次发布

本文链接：https://blog.csdn.net/aa2528877987/article/details/140480024

版权

在这里插入图片描述

🏆 作者简介，愚公搬代码
🏆《头衔》：华为云特约编辑，华为云云享专家，华为开发者专家，华为产品云测专家，CSDN博客专家，CSDN商业化专家，阿里云专家博主，阿里云签约作者，腾讯云优秀博主，腾讯云内容共创官，掘金优秀博主，亚马逊技领云博主，51CTO博客专家等。
🏆《近期荣誉》：2022年度博客之星TOP2，2023年度博客之星TOP2，2022年华为云十佳博主，2023年华为云十佳博主等。
🏆《博客内容》：.NET、Java、Python、Go、Node、前端、IOS、Android、鸿蒙、Linux、物联网、网络安全、大数据、人工智能、U3D游戏、小程序等相关领域知识。
🏆🎉欢迎 👍点赞✍评论⭐收藏

🚀前言

在现代移动应用开发中，网络通信是至关重要的一环。微信小程序作为一种轻量级的应用形式，凭借其便捷的使用体验和丰富的功能，已经成为开发者和用户的热门选择。为了实现与服务器的数据交互，掌握微信小程序的网络API显得尤为重要。

本文将深入探讨微信小程序的网络API，帮助开发者了解如何高效地进行数据请求、处理响应以及管理网络状态。我们将详细讲解常用的网络API，包括 wx.request、wx.uploadFile 和 wx.downloadFile 等，结合实际案例和使用场景，展示如何在小程序中实现数据的获取和交互。

无论您是刚入门的小程序开发者，还是希望提升网络编程能力的经验者，本篇文章都将为您提供实用的指导和深入的洞见。让我们一起学习微信小程序网络API，掌握实现高效数据交互的技巧，开启更丰富的开发旅程！

🚀一、网络API

🔎1.wx.request

微信小程序（WeChat Mini Programs）中的 wx.request 是用于向服务器发起网络请求的方法。

🦋1.1 `wx.request` 参数详解

wx.request 方法用于发起 HTTPS 网络请求，参数是一个对象。其属性如下：

url (string) - 必填
- 请求的 URL 地址。
data (object | string | ArrayBuffer)
- 请求的参数，可以是对象（推荐）、字符串或 ArrayBuffer。
header (object)
- 请求的头部信息，默认为 {'content-type': 'application/json'}。
method (string)
- HTTP 请求方法，默认为 GET。支持 OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT。
dataType (string)
- 返回的数据格式。默认为 json，如果设置为 其他，会返回原始数据。
responseType (string)
- 响应的数据类型，可以是 text 或 arraybuffer。默认为 text。
success (function)
- 接口调用成功的回调函数，参数为返回的数据。
fail (function)
- 接口调用失败的回调函数。
complete (function)
- 接口调用结束的回调函数（无论成功或失败）。

🦋1.2 CRUD 封装使用案例

为了更方便地进行 CRUD 操作，可以将 wx.request 封装成一个通用的函数。

// request.js
const baseUrl = 'https://api.example.com'; // 替换为你的接口地址

const request = (url, method, data, header = {
    'content-type': 'application/json' }) => {
   
  return new Promise((resolve, reject) => {
   
    wx.request({
   
      url: baseUrl + url,
      method: method,
      data: data,
      header: header,
      success: (res) => {
   
        if (res.statusCode === 200) {
   
          resolve(res.data);
        } else {
   
          reject(res);
        }
      },
      fail: (err) => {
   
        reject(err);
      }
    });
  });
};

const api = {
   
  get: (url, data, header) => request(url, 'GET', data, header),
  post: (url, data, header) => request(url, 'POST', data, header),
  put: (url, data, header) => request(url, 'PUT', data, header),
  delete: (url, data, header) => request(url, 'DELETE', data, header)
};

module.exports = api;

🦋1.3 使用封装的 CRUD 操作

假设我们有一个用户相关的 API，可以进行增删改查操作，下面是如何使用封装好的 api 进行这些操作的示例：

// 在你的页面文件中，例如 index.js
const api = require('../../utils/request.js');

// 获取用户列表
api.get('/users')
  .then(res => {
   
    console.log('用户列表:', res);
  })
  .catch(err => {
   
    console.error('获取用户列表失败:', err);
  });

// 创建新用户
api.post('/users', {
    name: 'John', age: 30 })
  .then(res => {
   
    console.log('创建用户成功:', res);
  })
  .catch(err => {
   
    console.error('创建用户失败:', err);
  });

// 更新用户信息
api.put('/users/1', {