uniapp + Vue3 + Setup + TS 开发小程序实战（网络请求封装篇）

前端

2023-09-30 23:04:09

前言

随着uniapp和小程序开发的不断升温，越来越多的开发者开始使用Uniapp + Vue3 + Setup + TS来进行开发。同时，对于请求的封装也成为开发者们共同关注的话题。

请求封装的主要目的：

添加typescript类型提示
在拦截器里面进行一些统一配置，如设置header、针对错误码统一提示等
多入口场景下，在未登录时，在拦截器里完成无痕登录后再请求

下面，我们将对这些目的逐一进行讲解：

一、添加typescript类型提示

在使用Uniapp + Vue3 + Setup + TS开发小程序时，我们可以通过typescript来为请求的封装添加类型提示。这样做的好处是：

可以提高代码的可读性和可维护性
可以减少开发中的错误
可以方便地进行重构和维护

下面是使用typescript为请求的封装添加类型提示的示例：

// 请求封装
const request = (options: RequestOptions): Promise<any> => {
  // ...
};
// 类型定义
interface RequestOptions {
  url: string;
  method?: 'GET' | 'POST' | 'PUT' | 'DELETE';
  data?: any;
  headers?: Record<string, string>;
  timeout?: number;
}

二、在拦截器里面进行一些统一配置

在使用Uniapp + Vue3 + Setup + TS开发小程序时，我们还可以在拦截器里面进行一些统一的配置。这样做的好处是：

可以减少代码的冗余
可以提高代码的可维护性
可以方便地进行重构和维护

下面是使用Uniapp + Vue3 + Setup + TS开发小程序，在拦截器里面进行一些统一配置的示例：

// 请求拦截器
const requestInterceptor = (config: AxiosRequestConfig): AxiosRequestConfig => {
  // ...
};

// 响应拦截器
const responseInterceptor = (response: AxiosResponse): AxiosResponse => {
  // ...
};

// 创建axios实例
const axios = Axios.create({
  baseURL: 'http://localhost:3000',
  timeout: 10000,
  headers: {
    'Content-Type': 'application/json'
  }
});

// 添加拦截器
axios.interceptors.request.use(requestInterceptor);
axios.interceptors.response.use(responseInterceptor);

三、多入口场景下的无痕登录

在使用Uniapp + Vue3 + Setup + TS开发多入口小程序时，我们经常会遇到这样的场景：

在未登录状态下，用户访问某个页面时，需要先进行登录才能继续操作
但是，我们不想让用户在登录页面上停留太久，希望能够在后台悄悄地完成登录，然后直接跳转到目标页面

这种登录方式就叫做“无痕登录”。

下面是使用Uniapp + Vue3 + Setup + TS开发多入口小程序，实现无痕登录的示例：

// 在App.vue中
const app = Vue.createApp(App);

// 监听登录状态变化事件
app.config.globalProperties.$onLoginStatusChange = (isLogin: boolean) => {
  // ...
};

// 创建axios实例
const axios = Axios.create({
  baseURL: 'http://localhost:3000',
  timeout: 10000,
  headers: {
    'Content-Type': 'application/json'
  }
});

// 请求拦截器
const requestInterceptor = (config: AxiosRequestConfig): AxiosRequestConfig => {
  // 在这里检查登录状态
  if (!isLogin) {
    // 如果未登录，则先进行无痕登录
    return silentLogin().then(() => {
      // 登录成功后，重新请求
      return request(config);
    });
  }

  return config;
};

// 添加拦截器
axios.interceptors.request.use(requestInterceptor);