vue3 axios 简单封装

Vue3 Axios 简单封装教程

整体流程

下面是实现"vue3 axios 简单封装"的步骤：

具体操作步骤

步骤1：安装 axios

首先，你需要在项目中安装 axios。在终端中运行以下命令：

npm install axios

步骤2：创建一个 axios 实例

在项目中创建一个 utils 文件夹，并在该文件夹中创建一个 request.js 文件。在 request.js 文件中使用以下代码创建一个 axios 实例：

import axios from 'axios';

const instance = axios.create({
  baseURL: ' // 设置基础URL
  timeout: 5000 // 设置超时时间
});

export default instance;

步骤3：封装请求方法

在 utils 文件夹中创建一个 api.js 文件，并在该文件中使用以下代码封装请求方法：

import request from './request.js';

export const fetchData = (url, params) => {
  return request({
    url: url,
    method: 'get',
    params: params
  });
};

export const postData = (url, data) => {
  return request({
    url: url,
    method: 'post',
    data: data
  });
};

步骤4：在 Vue3 项目中使用封装的请求方法

在 Vue3 项目的组件中使用封装的请求方法，示例代码如下：

import { fetchData, postData } from './utils/api.js';

// 使用 fetchData 方法
fetchData('/getUsers', { id: 1 })
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

// 使用 postData 方法
postData('/addUser', { name: 'Alice', age: 25 })
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

通过以上步骤，你已经成功实现了"vue3 axios 简单封装"。希望这篇教程对你有所帮助！

结尾

在学习过程中，不断积累经验，解决实际问题是成长的最好方式。加油！