開發 Web 應用程序中最重要的概念之一是數據獲取。 請求是應用程序功能的基礎,無論您是從內容 API 還是以產品數據形式從后端獲取數據,都必須以清晰、可擴展且非冗余的方式處理。今天給大家分享下如何在 React 使用 Axios 庫,在分享使用前,我們先詳細的了解下什么是 Axios。
Axios 是一個基于 promise 的 HTTP 庫,可以用在 JavaScript 和 Node.js 使中。它可以發送 get、post、put、delete 等請求,并且支持請求攔截、響應攔截、超時設置、請求取消等功能。Axios 使用簡單,代碼簡潔,并且跨平臺兼容性較好。
以下示例簡單的展示了在原生 JS 中,如何使用 Axios。
// 安裝 axiosnpm install axios// 引入 axiosimport axios from 'axios'// 發送 get 請求axios.get('/user?ID=12345') .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); });// 發送 post 請求axios.post('/user', { firstName: 'Fred', lastName: 'Flintstone' }) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); });
使用前,您須先使用 yarn 或 npm 將其安裝到您的項目中,安裝方法如下:
yarn add axios @types/axiosornpm install axios @types/axios
安裝完成后,你可以在你的 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()}, [])
實例的主要目的是創建一個新的具有自定義配置的axios實例;在上面的例子中,配置的邏輯是 baseURL(它將在每個調用的 URL 的開頭,使您不必重復它)和請求頭。
上面的代碼現在更容易閱讀和縮放;唯一剩下的冗余操作是對每個調用進行錯誤檢查。
將公共的邏輯抽取到一個自定義的 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()}, [])
現在多余的錯誤捕獲也消失了 ,代碼是不是干凈許多。
今天的分享就到這里,你覺得這個實現怎么樣?這對你有幫助嗎?請在評論區分享您的想法。
本文鏈接:http://www.www897cc.com/showinfo-26-35874-0.html如何在 React 中使用 Axios 庫
聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。郵件:2376512515@qq.com
上一篇: 接口中的大事務,該如何進行優化?