UniApp实现网络请求与缓存管理的技巧与实践-猿码集

UniApp实现网络请求与缓存管理的技巧与实践

UniApp是基于Vue.js框架开发的一款跨平台应用开发工具，它支持同时开发H5、小程序、安卓、iOS等多个平台的应用。在UniApp中，我们可以使用一些插件和技巧来实现网络请求和缓存管理。

1. uni.request实现网络请求

UniApp提供了一个uni.request方法来实现网络请求，其用法与浏览器中的XMLHttpRequest和jQuery中的$.ajax类似。我们可以使用uni.request发起微信小程序中的http/https请求，也可以发起uni-app自己定义的API请求。

注意: uni.request返回一个Promise对象，因此我们可以使用async/await进行异步编程，也可以使用.then()方法处理请求。

下面是uni.request的基本用法：


uni.request({
  url: 'https://www.example.com/api/data',
  method: 'GET',
  data: {
    id: 1,
    name: 'John'
  },
  success: (res) => {
    console.log(res.data);
  },
  fail: (err) => {
    console.log(err.errMsg);
  }
})

我们可以发现，uni.request的参数中有url、method、data等属性，分别对应请求的URL、请求方法和请求数据。成功时会调用success回调函数，失败时会调用fail函数。

1.1 发送FormData格式的数据

当我们需要发送FormData格式的数据时，可以使用uni.uploadFile方法。uni.uploadFile的用法与uni.request类似，只不过需要将文件上传的方式设置为formData。


uni.uploadFile({
  url: 'https://www.example.com/api/data',
  formData: {
    user_id: 1,
    file: path // 文件路径
  },
  success: (res) => {
    console.log(res.data);
  },
  fail: (err) => {
    console.log(err.errMsg);
  }
})

1.2 配置请求头

我们可以使用uni.request的header属性配置请求头。例如，在请求中添加Authorization头：


uni.request({
  url: 'https://www.example.com/api/data',
  method: 'GET',
  header: {
    Authorization: 'Bearer ' + token
  },
  success: (res) => {
    console.log(res.data);
  },
  fail: (err) => {
    console.log(err.errMsg);
  }
})

1.3 拦截请求和响应

在UniApp中，我们可以使用拦截器来拦截请求和响应。请求拦截器会在请求发送前执行，可以用于添加公共请求参数或设置请求头。响应拦截器会在请求响应后执行，可以用于对响应数据进行统一处理。

我们需要使用uni.addInterceptor方法添加拦截器。下面是一个添加请求拦截器的例子：


uni.addInterceptor(async (options) => {
  options.header.Authorization = 'Bearer ' + token;
  return options;
});

下面是一个添加响应拦截器的例子：


uni.addInterceptor(async (response, options) => {
  if (response.statusCode === 401) {
    // 如果响应码为401，表示需要重新获取token
    token = await fetchToken();
    return uni.request(options);
  }
  return response;
});

2. uni.storage实现数据缓存

在UniApp中，我们可以使用uni.storage来实现数据缓存。uni.storage使用键值对存储数据，支持异步操作，并且可以在不同的页面之间共享数据。

2.1 存储数据

我们可以使用uni.storage.set方法存储数据：


uni.storage.set({
  key: 'user_info',
  data: {
    id: 1,
    name: 'John'
  },
  success: function () {
    console.log('success');
  }
});

2.2 获取数据

我们可以使用uni.storage.get方法获取存储的数据：


uni.storage.get({
  key: 'user_info',
  success: function (res) {
    console.log(res.data);
  }
});

2.3 删除数据

我们可以使用uni.storage.remove方法删除存储的数据：


uni.storage.remove({
  key: 'user_info',
  success: function () {
    console.log('success');
  }
});

2.4 存储独立于App生命周期的数据

默认情况下，uni.storage存储的数据会随着App的生命周期而被销毁。如果我们需要存储独立于App生命周期的数据，可以使用uni.getStorageSync方法。


uni.setStorageSync('user_info', {
  id: 1,
  name: 'John'
});
const userInfo = uni.getStorageSync('user_info');
console.log(userInfo);

2.5 缓存数据过期时间

我们可以在uni.storage.set方法中指定过期时间，使数据在一定时间后自动失效。达到缓存更新的效果。


uni.storage.set({
  key: 'user_info',
  data: {
    id: 1,
    name: 'John'
  },
  expires: 24 * 60 * 60 * 1000, // 缓存有效期为24小时
  success: function () {
    console.log('success');
  }
});

3. 缓存请求数据并实现下拉刷新

使用uni.request请求数据时，我们可能需要将请求的结果缓存下来，以便在下次请求时直接使用缓存数据，而不是再次请求网络。同时，为了让用户在下拉刷新时获取最新数据，我们需要实现下拉刷新功能。

3.1 缓存请求数据

我们可以使用uni.storage将请求数据进行缓存。我们可以在请求完成后将数据存储到缓存中，下次请求时先从缓存中获取数据。


async function requestData() {
  const cache = await uni.getStorageSync('data_cache');
  if (cache) {
    // 如果缓存存在，直接返回缓存数据
    return Promise.resolve(cache);
  }
  const res = await uni.request({
    url: 'https://www.example.com/api/data',
    method: 'GET'
  });
  if (res.statusCode === 200) {
    // 如果请求成功，将数据存储到缓存中
    await uni.setStorageSync('data_cache', res.data);
    return Promise.resolve(res.data);
  } else {
    return Promise.reject(res.errMsg);
  }
}

3.2 实现下拉刷新

我们可以使用下拉刷新组件来实现下拉刷新。当用户下拉到底部时，下拉刷新组件会触发一个refresh事件，我们可以在该事件中重新请求数据。

首先，在页面中使用下拉刷新组件：


<scroll-view class="container" scroll-y="true" enable-back-to-top>
  <view>
    ...
  </view>
  <!-- 下拉刷新组件 -->
  <van-pull-refresh @refresh="onRefresh" />
</scroll-view>

然后，在页面中实现onRefresh方法：


async function onRefresh() {
  const res = await requestData();
  if (res) {
    this.dataList = res;
    // 停止下拉刷新动画
    uni.stopPullDownRefresh();
  }
}

4. 统一错误处理

在请求过程中，我们可能会遇到网络错误、服务端错误等情况。我们需要对这些错误进行统一处理，例如显示错误提示信息。

4.1 发生错误时统一处理

我们可以使用uni.addInterceptor方法添加拦截器，在发生错误时进行统一处理。例如，在发生错误时弹出一个错误提示框：


uni.addInterceptor(async (response) => {
  if (response.statusCode >= 400) {
    uni.showToast({
      title: response.errMsg,
      icon: 'none'
    });
    return Promise.reject(response.errMsg);
  }
  return response;
});

4.2 页面中显示错误信息

我们可以将错误信息保存在页面中，在用户操作后再显示错误信息。例如，在发生错误时将错误信息保存在error变量中，当用户点击页面时显示错误提示框：


data() {
  return {
    error: null
  };
},
mounted() {
  this.requestData().catch((err) => {
    this.error = err;
  });
},
methods() {
  showError() {
    if (this.error) {
      uni.showToast({
        title: this.error,
        icon: 'none'
      });
      this.error = null;
    }
  }
}

在用户点击页面时调用showError方法：


<view @click="showError">
  ...
</view>

总结

本文介绍了UniApp中实现网络请求和缓存管理的技巧，并通过一个简单的例子展示了如何实现下拉刷新功能和统一错误处理。我们可以运用这些技巧来优化我们的应用，提升用户体验。