返回

Vue3 笔记 - 封装 Axios，让网络请求更轻松

前端

简介

在 Vue3 项目中，使用 Axios 库进行网络请求是一个常见的需求。封装 Axios 可以使我们更轻松地管理网络请求，提供一个统一的接口和数据格式，便于应用程序的开发和维护。

封装 Axios

1. 安装 Axios

npm install axios

2. 创建 Axios 实例

import axios from 'axios'

const instance = axios.create({
  baseURL: 'https://example.com/api',
  timeout: 10000,
  headers: {
    'Content-Type': 'application/json'
  }
})

3. 使用 Axios 实例进行网络请求

instance.get('/users')
  .then((response) => {
    console.log(response.data)
  })
  .catch((error) => {
    console.error(error)
  })

4. 封装 Axios 实例

我们可以将 Axios 实例封装成一个更方便使用的模块，以便在应用程序中更轻松地使用。

import axios from 'axios'

const api = {
  get: (url, params) => {
    return instance.get(url, { params })
  },
  post: (url, data) => {
    return instance.post(url, data)
  },
  put: (url, data) => {
    return instance.put(url, data)
  },
  delete: (url, params) => {
    return instance.delete(url, { params })
  }
}

export default api

5. 在应用程序中使用封装的 Axios 实例

import api from 'api'

api.get('/users')
  .then((response) => {
    console.log(response.data)
  })
  .catch((error) => {
    console.error(error)
  })

总结

封装 Axios 可以简化网络请求的过程，使应用程序的开发和维护更加容易。在 Vue3 项目中，我们可以使用 Axios 实例来进行网络请求，并对其进行封装以提供一个统一的接口和数据格式。

实例

以下是一个使用封装的 Axios 实例发送请求的示例：

import api from 'api'

api.get('/users')
  .then((response) => {
    console.log(response.data)
  })
  .catch((error) => {
    console.error(error)
  })

相关链接