如何在 React 中使用 Axios 庫
開發(fā) Web 應用程序中最重要的概念之一是數據獲取。 請求是應用程序功能的基礎，無論您是從內容 API 還是以產品數據形式從后端獲取數據，都必須以清晰、可擴展且非冗余的方式處理。今天給大家分享下如何在 React 使用 Axios 庫，在分享使用前，我們先詳細的了解下什么是 Axios。
什么是 Axios？
Axios 是一個基于 promise 的 HTTP 庫，可以用在 JavaScript 和 Node.js 使中。它可以發(fā)送 get、post、put、delete 等請求，并且支持請求攔截、響應攔截、超時設置、請求取消等功能。Axios 使用簡單，代碼簡潔，并且跨平臺兼容性較好。
以下示例簡單的展示了在原生 JS 中，如何使用 Axios。
// 安裝 axios
npm install axios
// 引入 axios
import axios from 'axios'
// 發(fā)送 get 請求
axios.get('/user?ID=12345')
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
// 發(fā)送 post 請求
axios.post('/user', {
firstName: 'Fred',
lastName: 'Flintstone'
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});如何安裝 Axios？
使用前，您須先使用 yarn 或 npm 將其安裝到您的項目中，安裝方法如下：
yarn add axios @types/axios
or
npm install axios @types/axios簡單的在 React 中進行調用
安裝完成后，你可以在你的 React 應用中輕松使用 axios
import axios from "axios"
type Product = {
id: string
name: string,
}
const [product, setProduct] = useState<Product | null>(null)
const getData = async (): Promise<void> => {
const productData = await axios.get('https://sample.api/product', {
headers: {
'X-Custom-Header': '0123456789'
}
}).catch(error => {
console.log(error?.response.data)
return null
})
setProduct(productData?.data || null)
}
useEffect(() => {
getData()
}, [])多個請求的處理
在上面的示例中，axios 用于從具有自定義請求頭的 API 進行檢索數據。但是，如果您在呈現頁面組件之前使用相同的配置對相同的 API 進行多次調用怎么辦？每次調用都傳遞使用的配置都是相同的，所以調整后的代碼如下？
import axios from "axios"
type Product = {
id: string
name: string,
}
type Content = {
title: string,
body: string
}
const [product, setProduct] = useState<Product | null>(null)
const [content, setContent] = useState<Content | null>(null)
const getData = async (): Promise<void> => {
const axiosInstance = axios.create({
baseURL: 'https://sample.api',
headers: {
'X-Custom-Header': '0123456789'
}
})
const productData = await axiosInstance
.get('/product')
.catch(error => {
console.log(error?.response.data)
return null
})
const contentData = await axiosInstance
.get('/content').catch(error => {
console.log(error?.response.data)
return null
})
setProduct(productData?.data || null)
setContent(contentData?.data || null)
}
useEffect(() => {
getData()
}, [])實例的主要目的是創(chuàng)建一個新的具有自定義配置的axios實例；在上面的例子中，配置的邏輯是 baseURL（它將在每個調用的 URL 的開頭，使您不必重復它）和請求頭。
上面的代碼現在更容易閱讀和縮放；唯一剩下的冗余操作是對每個調用進行錯誤檢查。
進一步完善和優(yōu)化代碼
將公共的邏輯抽取到一個自定義的 API 請求類中，新建文件 src/utils/api.ts ，示例代碼如下：
import axios, { AxiosRequestConfig } from "axios"
export const api = (config: AxiosRequestConfig) => {
const instance = axios.create(config)
return {
get: async (url: string) => {
const result = await instance.get<{ data: any }>(url).catch((error: any) => {
console.log(error?.response?.data)
return null
})
return result
}
}
}接下來在組件中進行調用，示例代碼如下：
import { api } from "./utils/api"
type Product = {
id: string
name: string,
}
type Content = {
title: string,
body: string
}
const [product, setProduct] = useState<Product | null>(null)
const [content, setContent] = useState<Content | null>(null)
const getData = async (): Promise<void> => {
const instance = api({
baseURL: 'https://sample.api',
headers: {
'X-Custom-Header': '0123456789'
}
})
const productData = await instance.get('/product')
const contentData = await instance.get('/content')
setProduct(productData?.data || null)
setContent(contentData?.data || null)
}
useEffect(() => {
getData()
}, [])現在多余的錯誤捕獲也消失了 ，代碼是不是干凈許多。
總結
今天的分享就到這里，你覺得這個實現怎么樣？這對你有幫助嗎？請在評論區(qū)分享您的想法。
