微信小程序封装axios

原创

mob64ca12e8d855 2025-01-03 03:54:23 ©著作权

©著作权归作者所有：来自51CTO博客作者mob64ca12e8d855的原创作品，请联系作者获取转载授权，否则将追究法律责任

微信小程序封装axios

引言

在现代前端开发中，网络请求是与后端交互的重要手段。axios是一个基于Promise的HTTP客户端，可以帮助我们轻松地处理网络请求。在微信小程序中，由于自身的环境限制，使用axios并不是直接的，但我们可以对其进行封装，以便更简单地进行网络请求。

本文将通过实例演示如何在微信小程序中封装axios，并详细说明每一步的具体实现。

1. 准备工作

首先，你需要在你的微信小程序项目中引入axios。可以通过以下命令安装：

npm install axios --save

然后，我们需要创建一个request.js文件，用于封装axios实例。

2. 封装axios

在request.js文件中，我们将创建一个axios实例，并根据需求添加拦截器和默认配置。

// request.js
import axios from 'axios';

// 创建axios实例
const service = axios.create({
    baseURL: ' // API的基础路径
    timeout: 5000, // 超时时间
});

// 请求拦截器
service.interceptors.request.use(config => {
    // 在发送请求之前做些什么
    // 比如添加token
    const token = wx.getStorageSync('token');
    if (token) {
        config.headers['Authorization'] = 'Bearer ' + token;
    }
    return config;
}, error => {
    // 处理请求错误
    return Promise.reject(error);
});

// 响应拦截器
service.interceptors.response.use(response => {
    // 对响应数据做点什么
    return response.data;
}, error => {
    // 处理响应错误
    wx.showToast({
        title: '请求失败',
        icon: 'none'
    });
    return Promise.reject(error);
});

export default service;

3. 使用封装的axios

在小程序的页面中，使用封装好的axios非常简单。以下是一个示例：

// page.js
import request from '../utils/request.js';

Page({
    data: {
        items: []
    },
    onLoad() {
        this.fetchData();
    },
    fetchData() {
        request.get('/items')
            .then(response => {
                this.setData({
                    items: response
                });
            })
            .catch(error => {
                console.error(error);
            });
    }
});

在这个例子中，我们在页面加载时调用fetchData函数，通过封装后的axios请求接口获取数据。

4. 错误处理及用户反馈

在实际项目中，网络请求失败的处理非常重要。我们在响应拦截器中增加了错误处理的逻辑，使用wx.showToast显示请求失败的提示。

5. 序列图表示请求过程

为了更直观地理解我们封装的axios在微信小程序中的请求过程，下面是一个简单的序列图。

sequenceDiagram
    participant User
    participant WeChat
    participant Axios
    participant API

    User->>WeChat: 打开小程序
    WeChat->>Axios: 发起请求
    Axios->>API: 发送HTTP请求
    API-->>Axios: 返回数据
    Axios-->>WeChat: 处理响应
    WeChat-->>User: 展示结果

在这个序列图中，我们可以看到用户通过小程序发起请求，axios处理请求和响应，最终将结果展示给用户。