如何封裝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請求介面進行封裝，並在需要請求數據的組件中引入封裝好的請求函數。這樣能夠減少代碼重複並提高代碼的可維護性。