wx-promise-request 使用教程

wx-promise-request 使用教程

项目介绍

wx-promise-request 是一个用于微信小程序的网络请求库，它解决了微信小程序原生 wx.request 方法不支持 Promise 和并发数限制的问题。通过使用 wx-promise-request，开发者可以更方便地处理异步请求，避免回调地狱，提高代码的可读性和可维护性。

项目快速启动

安装

你可以通过 npm 安装 wx-promise-request：

npm install wx-promise-request

或者直接下载 index.js 文件并引入到你的项目中。

使用示例

在你的项目中引入 wx-promise-request：

import { request } from 'wx-promise-request';

request({
  url: 'https://www.example.com/api',
  method: 'GET',
  data: {
    key: 'value'
  }
}).then(res => {
  console.log(res);
}).catch(err => {
  console.error(err);
});

配置

你可以通过 setConfig 方法配置 wx-promise-request 的行为：

import { request, setConfig } from 'wx-promise-request';

setConfig({
  baseURL: 'https://www.example.com/api',
  headers: {
    'content-type': 'application/json'
  },
  timeout: 5000
});

应用案例和最佳实践

案例一：数据获取与展示

假设你需要从一个 API 获取数据并在小程序中展示：

import { request } from 'wx-promise-request';

Page({
  data: {
    items: []
  },
  onLoad() {
    request({
      url: '/items',
      method: 'GET'
    }).then(res => {
      this.setData({
        items: res.data
      });
    }).catch(err => {
      console.error('Failed to fetch items:', err);
    });
  }
});

最佳实践

1. 错误处理：始终在 catch 块中处理错误，以确保应用的稳定性。
2. 请求拦截器：使用请求拦截器来统一处理请求头、认证信息等。
3. 响应拦截器：使用响应拦截器来统一处理响应数据，如数据格式化、错误处理等。

典型生态项目

1. wx-queue-request

wx-queue-request 是另一个用于微信小程序的请求库，它专注于解决请求的并发数限制问题。你可以结合 wx-promise-request 使用，以获得更全面的解决方案。

2. es6-promise

es6-promise 是一个 Promise 库，如果你的项目需要更复杂的 Promise 操作，可以考虑引入 es6-promise 来增强功能。

3. wx-api-promisify

wx-api-promisify 是一个将微信小程序原生 API 转换为 Promise 风格的库，它可以帮助你更方便地使用微信小程序的其他 API。

通过结合这些生态项目，你可以构建一个更强大、更灵活的微信小程序网络请求层。