vue3 axios接口封装

 

在Vue 3中，可以通过封装axios来实现接口的统一管理和调用。封装后的接口调用更加简洁，代码可维护性也更好。以下是一个简单的Vue 3中axios接口封装的示例：

1.首先，安装axios和qs（如果需要处理复杂数据）：

npm install axios qs

2.创建一个api.js文件用于存放接口封装的代码：

// api.js
import axios from 'axios';
import qs from 'qs';

// 创建axios实例
const instance = axios.create({
  baseURL: 'https://api.example.com', // 替换为你的后端接口地址
  timeout: 10000, // 请求超时时间
});

// 请求拦截器
instance.interceptors.request.use(
  config => {
    // 在请求发送之前可以做一些处理，比如添加请求头等
    return config;
  },
  error => {
    // 请求错误处理
    return Promise.reject(error);
  }
);

// 响应拦截器
instance.interceptors.response.use(
  response => {
    // 在这里可以对响应数据进行处理
    return response.data;
  },
  error => {
    // 响应错误处理
    return Promise.reject(error);
  }
);

// 封装get请求
export function get(url, params) {
  return instance.get(url, {
    params,
  });
}

// 封装post请求
export function post(url, data) {
  return instance.post(url, qs.stringify(data));
}

3.在Vue组件中使用接口：

在上述示例中，我们在api.js文件中封装了get和post请求，并配置了axios的请求拦截器和响应拦截器，以便在请求发送和响应返回时进行统一处理。然后，在Vue组件中，我们通过导入get函数来调用后端接口获取数据。

这样，你就可以在Vue 3项目中使用封装后的axios接口调用，更加方便和灵活地管理和调用后端接口。同时，通过axios的拦截器，你可以在请求和响应时进行一些全局的处理，如添加请求头、统一处理错误等。