3步搞定微信小程序网络请求：vant-weapp组件化封装方案-CSDN博客

3步搞定微信小程序网络请求：vant-weapp组件化封装方案

【免费下载链接】vant-weapp 项目地址: https://gitcode.com/gh_mirrors/van/vant-weapp

你是否还在为微信小程序中重复编写网络请求代码而烦恼？是否遇到过接口错误处理混乱、加载状态不统一的问题？本文将带你使用vant-weapp组件库，通过3个步骤实现优雅的网络请求封装，让API调用从此变得简单高效。读完本文，你将掌握请求拦截、全局状态管理和错误处理的完整解决方案，并学会如何与vant-weapp的UI组件无缝集成。

一、项目结构与基础配置

vant-weapp作为轻量级的微信小程序组件库，提供了丰富的UI组件和工具函数，非常适合构建高效的网络请求层。我们将基于项目现有的目录结构，在example目录下组织请求相关代码。

项目核心目录结构如下：

gh_mirrors/van/vant-weapp/
├── example/                # 示例小程序代码
│   ├── app.js              # 小程序入口文件
│   ├── app.json            # 全局配置
│   ├── config.js           # 组件配置文件
│   └── common/             # 通用工具目录
└── lib/                    # 组件库代码
    └── notify/             # 消息通知组件

首先需要确保在app.json中正确注册vant-weapp组件，例如我们会用到的Loading加载组件和Notify消息通知组件：

{
  "usingComponents": {
    "van-loading": "/lib/loading/index",
    "van-notify": "/lib/notify/index"
  }
}

二、构建请求封装工具

2.1 创建基础请求函数

在example/common/目录下新建api.js文件，我们将在这里实现核心的请求封装逻辑。基础封装需要包含以下功能：

请求参数统一处理
加载状态显示
错误统一处理
响应数据格式化

// example/common/api.js
const api = {
  // 基础请求方法
  request: (options) => {
    // 显示加载状态
    wx.showLoading({
      title: '加载中...',
      mask: true
    });
    
    return new Promise((resolve, reject) => {
      wx.request({
        url: options.url,
        method: options.method || 'GET',
        data: options.data || {},
        header: {
          'Content-Type': 'application/json',
          // 可以添加统一的请求头，如token
          // 'Authorization': 'Bearer ' + getApp().globalData.token
        },
        success: (res) => {
          // 隐藏加载状态
          wx.hideLoading();
          
          // 统一处理响应码
          if (res.statusCode === 200) {
            resolve(res.data);
          } else {
            // 非200状态码处理
            reject(new Error(`请求失败: ${res.statusCode}`));
          }
        },
        fail: (err) => {
          wx.hideLoading();
          reject(err);
        }
      });
    });
  },
  
  // GET请求快捷方法
  get: (url, data) => {
    return api.request({ url, method: 'GET', data });
  },
  
  // POST请求快捷方法
  post: (url, data) => {
    return api.request({ url, method: 'POST', data });
  }
};

export default api;

2.2 集成vant-weapp组件

为了提升用户体验，我们将使用vant-weapp的Loading和Notify组件来优化加载状态和错误提示。修改api.js，将原生的wx.showLoading替换为组件化实现：

// 在app.js中初始化Notify
// example/app.js
import Notify from '../lib/notify/notify';

App({
  onLaunch() {
    // 初始化 Notify
    Notify.setDefaultOptions({
      duration: 3000,
      selector: '#van-notify'
    });
  },
  
  // 全局 Notify 方法
  showNotify(title, type = 'danger') {
    Notify({ type, message: title });
  }
});

然后在请求工具中使用：

// 修改api.js中的错误处理部分
fail: (err) => {
  wx.hideLoading();
  // 使用vant-weapp的Notify组件显示错误信息
  getApp().showNotify('网络请求失败，请稍后重试');
  reject(err);
}

三、实战应用与最佳实践

3.1 定义API接口

在api.js中扩展具体的业务接口，例如用户相关接口：

// 用户相关API
user: {
  login: (data) => api.post('/api/user/login', data),
  getInfo: (id) => api.get(`/api/user/${id}`)
},

// 商品相关API
goods: {
  list: (params) => api.get('/api/goods', params),
  detail: (id) => api.get(`/api/goods/${id}`)
}

3.2 页面中使用封装后的请求

在页面中引入并使用我们封装的请求工具，以商品列表为例：

// example/pages/goods/list.js
import api from '../../common/api';

Page({
  data: {
    goodsList: [],
    loading: true,
    empty: false
  },
  
  onLoad() {
    this.loadGoodsList();
  },
  
  loadGoodsList() {
    this.setData({ loading: true });
    
    api.goods.list({ page: 1, size: 10 })
      .then(res => {
        if (res.data.length === 0) {
          this.setData({ empty: true });
        } else {
          this.setData({ goodsList: res.data });
        }
      })
      .catch(err => {
        console.error('加载商品失败', err);
        // 可以使用vant-weapp的Empty组件显示空状态
        this.setData({ empty: true });
      })
      .finally(() => {
        this.setData({ loading: false });
      });
  }
});

3.3 结合vant-weapp组件的页面结构

在WXML中使用vant-weapp组件展示请求状态和结果：

<!-- example/pages/goods/list.wxml -->
<van-loading wx:if="{{loading}}" type="spinner" color="#1989fa" />

<van-empty wx:if="{{empty && !loading}}" 
  description="暂无商品数据" 
  image="empty" />

<view wx:else class="goods-list">
  <view wx:for="{{goodsList}}" class="goods-item">
    <text>{{item.name}}</text>
    <text>{{item.price}}</text>
  </view>
</view>

四、高级优化与扩展

4.1 请求拦截与响应拦截

进一步优化api.js，添加请求拦截器和响应拦截器，实现更灵活的请求控制：

// 添加拦截器功能
interceptors: {
  request: [],  // 请求拦截器
  response: []  // 响应拦截器
},

// 注册请求拦截器
useRequestInterceptor(fn) {
  this.interceptors.request.push(fn);
},

// 注册响应拦截器
useResponseInterceptor(fn) {
  this.interceptors.response.push(fn);
}

使用拦截器可以实现登录状态过期自动刷新token等高级功能。

4.2 全局配置与环境切换

在example/config.js中添加API环境配置：

// 新增API环境配置
export const apiConfig = {
  development: 'https://dev-api.example.com',
  production: 'https://api.example.com'
};

// 根据环境选择API地址
export const baseUrl = apiConfig[process.env.NODE_ENV] || apiConfig.production;

然后在api.js中引用：

import { baseUrl } from '../config';

// 修改请求方法
request: (options) => {
  // 拼接基础URL
  const fullUrl = baseUrl + options.url;
  // ...
}

五、总结与展望

通过本文介绍的方案，我们基于vant-weapp组件库实现了微信小程序网络请求的优雅封装，主要解决了以下问题：

代码复用：避免重复编写请求逻辑，提高开发效率
状态统一：使用vant-weapp组件实现一致的加载和错误提示
易于维护：集中管理API接口，便于后续修改和扩展

未来可以进一步完善：

添加请求缓存机制
实现取消请求功能
集成WebSocket长连接

希望本文的方案能帮助你更好地管理微信小程序中的网络请求。如果你有任何问题或更好的建议，欢迎在评论区留言讨论！别忘了点赞收藏，关注我们获取更多小程序开发技巧。

【免费下载链接】vant-weapp 项目地址: https://gitcode.com/gh_mirrors/van/vant-weapp

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考