2023uniapp中如何实现网络请求封装

uniapp是一款跨平台的开发框架，它基于Vue.js进行封装，可以同时构建iOS、Android和H5应用。在实际开发中，网络请求是必不可少的一部分，为了提高开发效率和代码的复用性，我们可以将网络请求进行封装。本文将详细介绍在uniapp中如何实现网络请求封装，并提供相应的代码示例。

一、创建网络请求封装文件
首先，我们需要创建一个网络请求的封装文件（比如utils/request.js）来统一管理我们的请求。这个文件中通常会包含以下内容：

1. 导入封装请求所需的uni.request方法：

   import { request } from '@/uni_modules/uni-request/index.js';

   注意：在使用uni.request时，需要安装uni-app官方推荐的插件uni-request。

2. 创建封装请求的函数：

   export function post(url, params) {
     return request({
    url: url,
    method: 'POST',
    data: params
     });
   }
   
   export function get(url, params) {
     return request({
    url: url,
    method: 'GET',
    data: params
     });
   }

   这里我们封装了post和get两个方法，分别对应着POST和GET请求。在实际开发中，根据项目需求可以添加其他类型的请求方法，比如PUT、DELETE等。

3. 导出request模块：

   export default {
     post,
     get
   }

二、使用封装的网络请求
在需要发送网络请求的地方，我们可以直接调用上一步中封装的方法。以下是一个简单的示例：

1. 在.vue文件中，导入request模块：

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

2. 调用封装的请求方法：

   request.post('/api/login', { username: 'admin', password: '123456' })
     .then(res => {
    console.log(res.data);
     })
     .catch(err => {
    console.error(err);
     });

   这里我们调用了封装的post方法，发送了一个登录请求，并且传入了用户名和密码作为请求参数。可以根据项目的实际需求，调用不同的请求方法。

三、封装请求的其他处理
除了简单的发送请求，我们还可以进行一些灵活的处理。以下是一些常见的处理方式：

1. 请求拦截：在发送请求前，可以添加请求拦截器来统一处理请求参数、添加token等。

   request.interceptors.request.use(config => {
     config.header.Authorization = 'Bearer ' + uni.getStorageSync('token');
     return config;
   })

2. 响应拦截：在接收到响应后，可以添加响应拦截器来统一处理返回的数据、异常等。

   request.interceptors.response.use(response => {
     if (response.statusCode === 200) {
    return response.data;
     } else {
    Promise.reject('请求失败');
     }
   })

3. 错误处理：可以在发生错误时进行统一的处理，比如弹出错误提示框等。

   request.catch(err => {
     uni.showToast({
    title: err,
    icon: 'none'
     });
   })

这些处理方式可以根据实际需求进行适配和扩展。

总结：
通过对uniapp中网络请求的封装，我们可以实现代码的复用和开发效率的提升。在封装时，我们可以根据实际需求添加请求拦截、响应拦截和错误处理等功能，来对请求进行统一管理。这样的封装可以使我们的代码结构更清晰、更易于维护。