封装uni.request
时间: 2023-11-11 14:02:54 浏览: 113
封装uni.request()是为了在项目开发中对请求进行二次封装,实现多个环境的请求配置,并对请求方式、数据格式等进行统一处理,简化请求过程。在main.js中可以挂载请求,通过import导入sendRequest、BASE_URL、socket、sendUpload等方法和变量,并将它们挂载到uni对象上。这样就可以在整个项目中通过uni对象使用封装后的请求方法。
相关问题
uniapp封装uni.request
Uni.request 是 uni-app 中用于发起网络请求的 API,它是对原生 API 的封装。如果你需要封装这个 API,可以按照以下步骤进行:
1. 在封装文件中引入 uni.request:
```
import uniRequest from '@/utils/uniRequest.js'
```
2. 封装请求方法:
```
export const request = (url, method, data) => {
return uniRequest({
url: url,
method: method,
data: data
}).then(res => {
// 返回数据处理
return res.data
}).catch((err) => {
// 错误处理
console.log(err)
})
}
```
3. 使用封装的请求方法:
```
import { request } from '@/api/request.js'
request('/api/user', 'get', {}).then(res => {
console.log(res)
})
```
这样就可以方便地使用封装后的 Uni.request 进行网络请求。
封装uni.request方法
### 封装 `uni.request` 实现通用 HTTP 请求
为了简化 HTTP 请求操作并提高代码可维护性和复用性,可以创建一个独立的 JavaScript 文件来封装 `uni.request` 方法。此文件将提供一组便捷的方法用于发起不同类型的 HTTP 请求。
#### 创建请求工具模块
首先,在项目中的合适位置(例如 `/utils/` 目录下),新建名为 `request.js` 的文件:
```javascript
// utils/request.js
import uni from '@dcloudio/uni-app';
const baseURL = ''; // 可选配置基础 URL
function request(options) {
const { url, method = 'GET', data = {}, headers = {} } = options;
return new Promise((resolve, reject) => {
uni.request({
url: `${baseURL}${url}`,
method,
data,
header: headers,
success(res) {
if (res.statusCode >= 200 && res.statusCode < 300) {
resolve(res);
} else {
reject(new Error('Network response was not ok.'));
}
},
fail(err) {
reject(err);
}
});
});
}
export default {
get(url, config = {}) {
return request({ ...config, url, method: 'GET' });
},
post(url, data, config = {}) {
return request({ ...config, url, method: 'POST', data });
},
put(url, data, config = {}) {
return request({ ...config, url, method: 'PUT', data });
},
delete(url, config = {}) {
return request({ ...config, url, method: 'DELETE' });
}
};
```
上述代码定义了一个基于 `Promise` 的 `request()` 函数作为底层请求逻辑,并导出了四个常用 HTTP 动词对应的快捷方法[^1]。
#### 配置全局可用
为了让整个应用都能方便地访问这些封装好的请求功能,可以在项目的入口文件 `main.js` 中进行如下设置:
```javascript
// main.js
import Vue from 'vue';
import App from './App.vue';
import request from './utils/request'; // 引入自定义请求库
Vue.config.productionTip = false;
Vue.prototype.$http = request; // 注册到原型链上以便组件内直接使用 this.$http 调用
new Vue({
render: h => h(App),
}).$mount('#app');
```
通过这种方式,任何地方都可以轻松调用 `$http.get()`, `$http.post()`, 等等来进行网络通信而无需重复编写相似的代码片段[^2]。
阅读全文
相关推荐















