vue微信小程序接口封装uniapp 使用uni.request,包括响应拦截，设置请求头

在Vue框架中，若要将微信小程序的接口操作封装以便在UniApp中复用，可以使用UniApp提供的`uni.request`方法，它是一个基于Promise的网络请求API。以下是基本的封装步骤以及涉及的响应拦截和设置请求头：

1. 引入uni.request：
首先，在Vue组件的script部分引入`uni`对象，它是 UniApp 的核心API之一。

import { uni } from '@dcloudio/uni-app'

2. 定义接口函数：
创建一个自定义函数，如`wxRequest`，接受请求配置对象作为参数，并返回一个Promise。

export const wxRequest = async (config) => {
  try {
    return await uni.request(config);
  } catch (error) {
    // 处理错误，例如日志记录或通知用户
    console.error('Network error:', error);
    throw new Error(error.message); // 或者根据需要抛出错误信息
  }
}

3. 设置请求头：
在配置对象`config`中，你可以通过`headers`属性添加自定义的请求头。例如，设置"Content-Type"为JSON格式：

const headers = {
  'Content-Type': 'application/json',
};
const config = {
  url: 'https://your-api-url.com', // 将此处替换为实际的API地址
  method: 'POST', // 请求方式
  data: { key: 'value' }, // 发送的数据
  headers,
};
await wxRequest(config);

4. 响应拦截：
虽然uni.request本身提供了一定程度的错误处理，但在全局范围内，你可能希望对所有请求都统一处理响应状态。可以通过Vue的生命周期钩子或Vuex的状态管理来实现。例如，可以在`created`或`mounted`阶段设置一个全局的响应拦截器：

export default {
  created() {
    uni.request.onShowLoading({
      title: '加载中...',
      mask: true,
      success() {
        this.$store.dispatch('clearError')(); // 清除之前的错误
      },
    });

    uni.request.onError((err) => {
      this.$store.commit('setError', err); // 存储错误并显示给用户
    });
  },
  // ...
};