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

WBOY 原创: 2023-07-04 12:49:29 1658浏览

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

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

导入封装请求所需的uni.request方法：
```
import { request } from '@/uni_modules/uni-request/index.js';
```
注意：在使用uni.request时，需要安装uni-app官方推荐的插件uni-request。
创建封装请求的函数：
```
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等。
导出request模块：
```
export default {
  post,
  get
}
```

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

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

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

调用封装的请求方法：
```
request.post('/api/login', { username: 'admin', password: '123456' })
  .then(res => {
 console.log(res.data);
  })
  .catch(err => {
 console.error(err);
  });
```
这里我们调用了封装的post方法，发送了一个登录请求，并且传入了用户名和密码作为请求参数。可以根据项目的实际需求，调用不同的请求方法。

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

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

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

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

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