简易uniapp网络请求封装

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 实例原型链上，以便全局访问。