小程序开发中的网络请求封装及拦截器应用实例

在小程序开发中，网络请求是一个非常常见的需求。为了简化和优化代码，我们通常会使用网络请求封装和拦截器来处理网络请求相关的逻辑。本文将介绍小程序开发中网络请求封装和拦截器的应用实例，并提供一些实用的技巧。

网络请求封装

在小程序开发中，我们可以使用 wx.request() 方法来进行网络请求。但是，每次发起请求都需要编写大量重复的代码，这不仅冗余，还容易出错。因此，我们可以通过封装网络请求方法来简化代码，并提高代码的复用性。

以下是一个简单的网络请求封装的示例：

// api.js
const request = (url, method, data) => {
  return new Promise((resolve, reject) => {
    wx.request({
      url: url,
      method: method,
      data: data,
      success: (res) => {
        resolve(res.data);
      },
      fail: (error) => {
        reject(error);
      }
    });
  });
};

export const get = (url, data) => {
  return request(url, 'GET', data);
};

export const post = (url, data) => {
  return request(url, 'POST', data);
};

在上述示例中，我们将常见的 GET 和 POST 请求分别封装成了 get 和 post 方法。通过调用这些方法，我们只需要传入请求的 URL 和数据即可发起网络请求。这种封装方式可以简化代码，提高重用性，使代码更易于维护。

拦截器

拦截器是一个非常重要的概念，它可以让我们在发送请求之前或之后对请求进行一些处理。在小程序开发中，我们通常会使用拦截器来处理一些公共的逻辑，例如添加请求头、统一处理错误等。

以下是一个简单的拦截器的示例：

// interceptor.js
const request = (url, method, data) => {
  return new Promise((resolve, reject) => {
    // 发送请求之前的拦截逻辑
    // ...

    wx.request({
      url: url,
      method: method,
      data: data,
      success: (res) => {
        // 请求成功的拦截逻辑
        // ...
        resolve(res.data);
      },
      fail: (error) => {
        // 请求失败的拦截逻辑
        // ...
        reject(error);
      }
    });
  });
};

export const get = (url, data) => {
  return request(url, 'GET', data);
};

export const post = (url, data) => {
  return request(url, 'POST', data);
};

在上述示例中，我们将拦截器的逻辑放在了 request 方法中。在发送请求之前，我们可以进行一些预处理操作，例如添加请求头、添加 loading 等。在请求成功或失败后，我们也可以根据返回的数据或错误来进行一些处理，例如统一处理错误信息、移除 loading 等。

实例应用

接下来，我们将通过一个实际的应用场景来演示网络请求封装和拦截器的应用。

假设我们正在开发一个小程序，该小程序需要与后端 API 进行交互获取数据，并且需要在每次请求之前添加用户认证 token，以及在每次请求返回之后显示相关的提示信息。

首先，我们需要在封装的请求中添加用户认证 token。我们可以通过添加请求头的方式来实现：

// api.js
import { getToken } from './utils/auth';

const request = (url, method, data) => {
  return new Promise((resolve, reject) => {
    const token = getToken(); // 获取用户认证 token
    wx.request({
      url: url,
      method: method,
      data: data,
      header: {
        'Authorization': 'Bearer ' + token // 添加用户认证 token
      },
      success: (res) => {
        resolve(res.data);
      },
      fail: (error) => {
        reject(error);
      }
    });
  });
};

// ... 省略其他代码

在上述示例中，我们通过调用 getToken() 方法来获取用户认证 token，并将其添加到请求头中。这样，每次发起请求时，都会包含用户认证 token，以便后端进行身份验证。

接下来，我们可以通过拦截器来统一处理请求返回的结果，并显示相关提示信息。例如，显示 loading、成功提示或错误提示：

// interceptor.js

const request = (url, method, data) => {
  return new Promise((resolve, reject) => {
    wx.showLoading({title: '加载中...'}); // 显示 loading

    wx.request({
      url: url,
      method: method,
      data: data,
      success: (res) => {
        resolve(res.data);
      },
      fail: (error) => {
        reject(error);
      },
      complete: () => {
        wx.hideLoading(); // 隐藏 loading
      }
    });
  });
};

// ... 省略其他代码

在上述示例中，我们在请求开始时，通过 wx.showLoading() 方法显示 loading 提示。在请求成功或失败后，通过 wx.hideLoading() 方法隐藏 loading 提示。这样，无论请求成功与否，用户都能够明确地了解到请求的状态。

通过网络请求封装和拦截器的应用，我们可以实现代码的重用和逻辑的统一处理，使小程序开发更加高效和易于维护。

以上就是小程序开发中的网络请求封装及拦截器应用实例的介绍。希望本文对你有所帮助！如果你有任何疑问或建议，欢迎留言讨论。