uni-app新手 求一个封装好的网络请求步骤 写详细点 如何封装 引入 使用 写详细点

当然，以下是一个在uni-app中封装网络请求的详细步骤，包括如何封装、引入和使用。

1. 封装网络请求

首先，在项目的 utils 目录下创建一个 request.js 文件，用于封装网络请求。

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

// 创建axios实例
const service = axios.create({
    baseURL: 'https://api.example.com', // 替换为你的API基础URL
    timeout: 5000 // 请求超时时间
});

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

// 响应拦截器
service.interceptors.response.use(
    response => {
        const res = response.data;
        // 可以在这里统一处理响应数据
        return res;
    },
    error => {
        // 对响应错误做些什么
        console.error('err' + error); // for debug
        return Promise.reject(error);
    }
);

export default service;

2. 引入封装好的网络请求

在你的页面或组件中引入 request.js 文件。

// pages/index/index.vue
<template>
    <view>
        <!-- 页面内容 -->
    </view>
</template>

<script>
import request from '@/utils/request';

export default {
    data() {
        return {
            // 数据
        };
    },
    methods: {
        async fetchData() {
            try {
                const response = await request.get('/endpoint'); // 替换为你的API端点
                console.log(response);
                // 处理响应数据
            } catch (error) {
                console.error('请求失败:', error);
            }
        }
    },
    onLoad() {
        this.fetchData();
    }
};
</script>

<style scoped>
/* 样式 */
</style>

3. 使用封装好的网络请求

在上面的 index.vue 文件中，我们已经在 onLoad 生命周期钩子中调用了 fetchData 方法，该方法使用封装好的网络请求来发送GET请求。你可以根据需求修改请求方法（如POST）和请求参数。

async fetchData() {
    try {
        const response = await request.post('/endpoint', { key: 'value' }); // 替换为你的API端点和参数
        console.log(response);
        // 处理响应数据
    } catch (error) {
        console.error('请求失败:', error);
    }
}

这样，你就完成了一个简单的网络请求封装，并在uni-app中进行了引入和使用。这个封装方法可以根据你的具体需求进行扩展，比如添加更多的请求拦截器、错误处理等。