uni-app vue3如何封装接口请求

在uni-app vue3开发中，合理封装接口请求能够有效提升代码的可维护性与复用性。下面将详细介绍接口请求封装的步骤。

安装合适的请求库。在uni-app里，常用的是axios。通过命令行工具进入项目目录，执行npm install axios 即可完成安装。

接着创建一个专门用于封装请求的文件，例如api.js。在这个文件中引入axios ，并创建一个axios实例。通过设置实例的一些默认属性，如baseURL、timeout等，可以让请求更加规范和高效。比如：

import axios from 'axios';
const service = axios.create({
  baseURL: 'https://example.com/api',
  timeout: 5000
});

然后，进行请求拦截器和响应拦截器的设置。请求拦截器可以在请求发送前做一些处理，如添加请求头。响应拦截器则用于处理响应结果，例如统一处理错误提示：

service.interceptors.request.use(config => {
  // 这里可以添加token等请求头信息
  config.headers['Authorization'] = localStorage.getItem('token');
  return config;
}, error => {
  return Promise.reject(error);
});

service.interceptors.response.use(response => {
  const res = response.data;
  if (res.code!== 200) {
    uni.showToast({
      title: res.message || '请求失败',
      icon: 'none'
    });
    return Promise.reject(new Error(res.message || '请求失败'));
  } else {
    return res;
  }
}, error => {
  uni.showToast({
    title: error.message || '网络错误',
    icon: 'none'
  });
  return Promise.reject(error);
});

之后，开始封装具体的接口请求方法。以一个获取用户信息的接口为例：

export const getUserInfo = () => {
  return service.get('/user/info');
};

在页面组件中使用封装好的接口请求也很简单。在script setup语法糖下，引入接口请求方法并调用：

import { getUserInfo } from '@/api/api.js';
const getUser = async () => {
  try {
    const res = await getUserInfo();
    console.log(res);
  } catch (error) {
    console.error(error);
  }
};

通过上述步骤，在uni-app vue3项目中就实现了接口请求的封装。这种封装方式让代码结构更加清晰，每个接口请求都有统一的处理逻辑，无论是维护还是拓展都更加方便，有助于提升项目的整体开发效率。