uni-app 图鸟UI - 图鸟科技 封装网络请求

在uni-app项目中，封装网络请求是一个常见的需求，这有助于提高代码的可维护性和复用性。图鸟UI虽然是一个UI组件库，但封装网络请求的逻辑与之并不冲突。下面是一个简单的示例，展示如何在uni-app中封装网络请求。

首先，创建一个名为http.js的文件，用于封装网络请求的逻辑：

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

// 创建axios实例
const service = axios.create({
    baseURL: process.env.VUE_APP_BASE_API, // 基础URL，可以在.env文件中配置
    timeout: 5000 // 请求超时时间
});

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

// 响应拦截器
service.interceptors.response.use(
    response => {
        const res = response.data;
        if (res.code !== 200) {
            // 根据业务逻辑处理错误响应
            uni.showToast({
                title: res.message || 'Error',
                icon: 'none'
            });
            return Promise.reject(new Error(res.message || 'Error'));
        } else {
            return res.data; // 返回实际数据
        }
    },
    error => {
        // 对响应错误做些什么
        uni.showToast({
            title: 'Network Error',
            icon: 'none'
        });
        return Promise.reject(error);
    }
);

export default service;

接下来，在你的组件或服务中引入并使用这个封装好的网络请求：

// example.vue
<template>
    <view>
        <button @click="fetchData">Fetch Data</button>
    </view>
</template>

<script>
import http from '@/utils/http.js'; // 假设http.js放在utils目录下

export default {
    methods: {
        async fetchData() {
            try {
                const response = await http.get('/api/example'); // 假设有一个/api/example的API
                console.log(response);
            } catch (error) {
                console.error(error);
            }
        }
    }
}
</script>

以上代码展示了如何在uni-app项目中封装网络请求，并在组件中使用它。你可以根据实际需求调整baseURL、请求/响应拦截器的逻辑，以及错误处理的方式。这样的封装使得网络请求代码更加简洁、易于管理。