dQJ28資訊網(wǎng)——每日最新資訊28at.com

開發(fā) Web 應(yīng)用程序中最重要的概念之一是數(shù)據(jù)獲取。 請(qǐng)求是應(yīng)用程序功能的基礎(chǔ)，無(wú)論您是從內(nèi)容 API 還是以產(chǎn)品數(shù)據(jù)形式從后端獲取數(shù)據(jù)，都必須以清晰、可擴(kuò)展且非冗余的方式處理。今天給大家分享下如何在 React 使用 Axios 庫(kù)，在分享使用前，我們先詳細(xì)的了解下什么是 Axios。dQJ28資訊網(wǎng)——每日最新資訊28at.com

什么是 Axios？

Axios 是一個(gè)基于 promise 的 HTTP 庫(kù)，可以用在 JavaScript 和 Node.js 使中。它可以發(fā)送 get、post、put、delete 等請(qǐng)求，并且支持請(qǐng)求攔截、響應(yīng)攔截、超時(shí)設(shè)置、請(qǐng)求取消等功能。Axios 使用簡(jiǎn)單，代碼簡(jiǎn)潔，并且跨平臺(tái)兼容性較好。dQJ28資訊網(wǎng)——每日最新資訊28at.com

以下示例簡(jiǎn)單的展示了在原生 JS 中，如何使用 Axios。dQJ28資訊網(wǎng)——每日最新資訊28at.com

// 安裝 axiosnpm install axios// 引入 axiosimport axios from 'axios'// 發(fā)送 get 請(qǐng)求axios.get('/user?ID=12345')  .then(function (response) {    console.log(response);  })  .catch(function (error) {    console.log(error);  });// 發(fā)送 post 請(qǐng)求axios.post('/user', {    firstName: 'Fred',    lastName: 'Flintstone'  })  .then(function (response) {    console.log(response);  })  .catch(function (error) {    console.log(error);  });

如何安裝 Axios？

使用前，您須先使用 yarn 或 npm 將其安裝到您的項(xiàng)目中，安裝方法如下：dQJ28資訊網(wǎng)——每日最新資訊28at.com

yarn add axios @types/axiosornpm install axios @types/axios

簡(jiǎn)單的在 React 中進(jìn)行調(diào)用

安裝完成后，你可以在你的 React 應(yīng)用中輕松使用 axiosdQJ28資訊網(wǎng)——每日最新資訊28at.com

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()}, [])

多個(gè)請(qǐng)求的處理

在上面的示例中，axios 用于從具有自定義請(qǐng)求頭的 API 進(jìn)行檢索數(shù)據(jù)。但是，如果您在呈現(xiàn)頁(yè)面組件之前使用相同的配置對(duì)相同的 API 進(jìn)行多次調(diào)用怎么辦？每次調(diào)用都傳遞使用的配置都是相同的，所以調(diào)整后的代碼如下？dQJ28資訊網(wǎng)——每日最新資訊28at.com

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()}, [])

實(shí)例的主要目的是創(chuàng)建一個(gè)新的具有自定義配置的axios實(shí)例；在上面的例子中，配置的邏輯是 baseURL（它將在每個(gè)調(diào)用的 URL 的開頭，使您不必重復(fù)它）和請(qǐng)求頭。dQJ28資訊網(wǎng)——每日最新資訊28at.com

上面的代碼現(xiàn)在更容易閱讀和縮放；唯一剩下的冗余操作是對(duì)每個(gè)調(diào)用進(jìn)行錯(cuò)誤檢查。dQJ28資訊網(wǎng)——每日最新資訊28at.com

進(jìn)一步完善和優(yōu)化代碼

將公共的邏輯抽取到一個(gè)自定義的 API 請(qǐng)求類中，新建文件 src/utils/api.ts ，示例代碼如下：dQJ28資訊網(wǎng)——每日最新資訊28at.com

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    }  }}

接下來在組件中進(jìn)行調(diào)用，示例代碼如下：dQJ28資訊網(wǎng)——每日最新資訊28at.com

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()}, [])

現(xiàn)在多余的錯(cuò)誤捕獲也消失了 ，代碼是不是干凈許多。dQJ28資訊網(wǎng)——每日最新資訊28at.com

總結(jié)

今天的分享就到這里，你覺得這個(gè)實(shí)現(xiàn)怎么樣？這對(duì)你有幫助嗎？請(qǐng)?jiān)谠u(píng)論區(qū)分享您的想法。dQJ28資訊網(wǎng)——每日最新資訊28at.com

本文鏈接：http://www.tebozhan.com/showinfo-26-35874-0.html如何在 React 中使用 Axios 庫(kù)

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。郵件：2376512515@qq.com

上一篇： 接口中的大事務(wù)，該如何進(jìn)行優(yōu)化？

下一篇： 深入了解 React Fiber：應(yīng)用與源碼實(shí)現(xiàn)