Vue 中网络请求封装
在使用 Vue 进行开发时,我们通常需要使用网络请求来获取或提交数据。为了提高代码的可读性和可维护性,我们可以将网络请求进行封装,抽象出统一的处理逻辑,并将其添加到 Vue 实例中以便全局使用。
以下是一个基于 uni.request
的简单网络请求封装示例:
const baseUrl = "http://localhost:6645";
const Authorization = token ? `Bearer ${
uni.getStorageSync("token")}` : "";
const request = (url = '', data = {
}, type = '') => {
return new Promise((resolve, reject) => {
uni.showLoading({
title: '加载中' }); // 显示加载框
uni.request({
method: type,
url: baseUrl + url,
data: data,
header: {
Authorization },
dataType: 'json',
success: (res) => {
resolve(res);
},
fail: (err) => {
reject(err);
},
complete: () => {
uni.hideLoading(); // 隐藏加载框
}
});
});
};
export default request;
其中,baseUrl
表示接口基础 URL 地址,Authorization
表示携带的 token 凭证。这里我们使用了箭头函数和 ES6 的解构赋值语法来简化代码。
该封装方法接收三个参数:请求的 URL 地址、请求的数据、请求的方法(GET、POST 等)。使用 Promise 对象来返回请求结果,并在请求过程中显示加载框。
使用和扩展
我们可以将该网络请求封装添加到 Vue 的原型链上,使其能够全局访问。在 main.js 文件中引入该封装方法:
import request from './request';
Vue.prototype.$request = request;
上述代码中,我们将 request
挂载到了 $request
属性上,以便在组件中使用。
在组件中使用 $request
进行网络请求:
<template>
<div>
<h2>{
{ title }}</h2>
<ul>
<li v-for="(item, index) in list" :key="index">{
{ item }}</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
title: '',
list: []
};
},
methods: {
loadData() {
this.$request('/api/data').then(res => {
this.title = res.title;
this.list = res.data;
}).catch(err => {
console.error(err);
});
}
},
mounted() {
this.loadData();
}
};
</script>
使用 $request
方法来发起网络请求,获取数据并更新组件的状态。这样,我们可以在任何组件中使用 $request
来发起网络请求,而不需要重复编写网络请求的代码。
如果需要对网络请求进行扩展或修改,只需要修改封装函数即可,不需要在每个组件中进行修改。
总结
通过将网络请求进行封装,我们可以提高代码的可读性、可维护性和复用性,避免重复编写网络请求代码的问题。在 Vue 中,我们可以将封装方法添加到 Vue 实例原型链上,以便全局访问。