如何封装axios请求接口实现更好的数据获取

一、什么是axios

axios是一个基于Promise的HTTP客户端，用于浏览器和node.js。它实现了一个简单的接口，可用于执行HTTP请求并返回HTTP响应。在前端开发中，通常使用axios向后端发送请求并获取返回数据。

二、为什么要封装axios请求接口

直接使用axios发送请求会造成代码重复和不易维护。在前端开发中，我们通常需要访问不同的接口，并在不同的组件中使用相同的接口。为了减少代码重复并提高代码的可维护性，我们需要对axios请求接口进行封装。

三、如何封装axios请求接口

1. 创建请求实例

import axios from 'axios'
const instance = axios.create({
   baseURL: '/api',
   timeout: 10000,
   headers: {'Content-Type': 'application/json;charset=utf-8'}
})

在创建axios请求实例时，我们可以设置请求的基础URL、超时时间和请求头等参数。

2. 封装GET请求

export const getRequest = (url, params = {}) => {
   return new Promise((resolve, reject) => {
      instance.get(url, {params: params}).then(response => {
         resolve(response.data)
      }).catch(error => {
         reject(error)
      })
   })
}

通过封装GET请求，我们可以将请求参数和请求地址传递给getRequest函数并返回请求数据。我们可以在需要请求的组件中引入getRequest函数，并使用它来获取需要的数据。

3. 封装POST请求

export const postRequest = (url, data = {}) => {
   return new Promise((resolve, reject) => {
      instance.post(url, data).then(response => {
         resolve(response.data)
      }).catch(error => {
         reject(error)
      })
   })
}

通过封装POST请求，我们可以将请求的数据和请求地址传递给postRequest函数并返回请求数据。我们可以在需要请求的组件中引入postRequest函数，并使用它来发送需要的数据。

4. 封装PUT请求

export const putRequest = (url, data = {}) => {
   return new Promise((resolve, reject) => {
      instance.put(url, data).then(response => {
         resolve(response.data)
      }).catch(error => {
         reject(error)
      })
   })
}

通过封装PUT请求，我们可以将请求的数据和请求地址传递给putRequest函数并返回请求数据。我们可以在需要请求的组件中引入putRequest函数，并使用它来修改需要的数据。

5. 封装DELETE请求

export const deleteRequest = (url) => {
   return new Promise((resolve, reject) => {
      instance.delete(url).then(response => {
         resolve(response.data)
      }).catch(error => {
         reject(error)
      })
   })
}

通过封装DELETE请求，我们可以将请求地址传递给deleteRequest函数并返回请求数据。我们可以在需要请求的组件中引入deleteRequest函数，并使用它来删除需要的数据。

四、总结

通过以上步骤，我们可以将axios请求接口进行封装，并在需要请求数据的组件中引入封装好的请求函数。这样能够减少代码重复并提高代码的可维护性。