微信小程序开发：网络请求便利化**

使用封装后的网络请求函数来简化微信小程序开发

在微信小程序开发中，网络请求是不可或缺的一部分。虽然小程序原生提供的网络请求接口功能齐全，但使用起来却相当繁琐，需要手动拼接请求参数，处理响应数据，容易出现错误。为了简化网络请求的使用，提高开发效率和代码的可维护性，不妨对原生的网络请求进行二次封装。

封装方法

封装的方法很简单，就是新建一个模块，在这个模块中定义一个统一的网络请求函数。这个函数接收请求参数，并返回一个 Promise 对象。当 Promise 对象 resolve 时，返回响应数据；当 Promise 对象 reject 时，返回错误信息。

网络请求函数的实现如下：

function request(options) {
  return new Promise((resolve, reject) => {
    wx.request({
      ...options,
      success: (res) => {
        resolve(res.data);
      },
      fail: (err) => {
        reject(err);
      },
    });
  });
}

利用这个封装后的网络请求函数，进行网络请求就变得非常便捷。例如，发送一个 GET 请求，只需调用以下代码：

request({
  url: 'https://example.com/api/v1/users',
  method: 'GET',
}).then((data) => {
  console.log(data);
}).catch((err) => {
  console.log(err);
});

优势

封装后的网络请求函数具有以下优势：

• 使用简便： 使用起来非常简单，只需要调用一个函数即可，无需手动拼接请求参数和处理响应数据。
• 功能齐全： 支持 HTTP/HTTPS 协议，提供 GET、POST、PUT、DELETE 等请求方式，可以满足绝大多数网络请求场景。
• 可维护性强： 代码的可维护性非常好，只需要修改封装后的网络请求函数，就可以影响所有使用这个函数的地方。
• 效率高： 使用封装后的网络请求函数可以提高开发效率，减少出错的概率。

代码示例

下面是一个使用封装后的网络请求函数进行网络请求的完整示例：

import request from './network-request';

const app = getApp();

Page({
  onLoad() {
    request({
      url: 'https://example.com/api/v1/users',
      method: 'GET',
    })
    .then((data) => {
      app.globalData.users = data;
      this.setData({
        users: data,
      });
    })
    .catch((err) => {
      console.log(err);
    });
  },
});

在上面的示例中，我们通过调用 request 函数发送了一个 GET 请求，并使用 Promise 处理响应结果。如果请求成功，我们将把响应数据保存在全局数据中，并在页面数据中进行更新。如果请求失败，则在控制台中打印错误信息。

常见问题解答

• 如何使用封装后的网络请求函数进行 POST 请求？

request({
  url: 'https://example.com/api/v1/users',
  method: 'POST',
  data: {
    username: 'john',
    password: 'secret',
  },
});

• 如何设置请求头？

request({
  url: 'https://example.com/api/v1/users',
  method: 'GET',
  header: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9...',
  },
});

• 如何设置超时时间？

request({
  url: 'https://example.com/api/v1/users',
  method: 'GET',
  timeout: 10000,
});

• 如何处理错误响应？

request({
  url: 'https://example.com/api/v1/users',
  method: 'GET',
})
.then((data) => {
  // 处理成功响应
})
.catch((err) => {
  // 处理错误响应
});

• 封装后的网络请求函数是否支持上传文件？

request({
  url: 'https://example.com/api/v1/upload',
  method: 'POST',
  filePath: '/path/to/file',
  name: 'file',
});

总结

封装后的微信小程序网络请求函数是一种非常有用的工具，可以简化网络请求的使用，提高开发效率和代码的可维护性。推荐在实际开发中使用。