我是 Axios 和 React 的新手，我正在創建 React 應用程式，該應用程式使用 Axios 執行 CRUD 操作以從 API 獲取資料。
在api/agent.ts我為我開發的 API 指定的 Axios 配置中。
api/agent.ts
import axios, { AxiosError, AxiosResponse } from "axios"
// my API url
axios.defaults.baseURL = "http://localhost:8800/api"
// api response
const responseBody = <T>(response: AxiosResponse<T>) => response.data
const requests = {
get: <T>(url: string) => axios.get<T>(url).then(responseBody),
post: <T>(url: string, body: {}) =>
axios.post<T>(url, body).then(responseBody),
put: <T>(url: string, body: {}) =>
axios.put<T>(url, body).then(responseBody),
del: <T>(url: string) => axios.delete<T>(url).then(responseBody),
}
// other API requests...
現在，在某些組件，我想用愛可信使來自其它服務的請求不是從axios.defaults.baseURL我配置api/agent.ts，例如，我想打從我的請求dummyData.json中public的檔案夾
public/dummyData/dummy_data.json
{
"message": "data fetched successfully",
"data": [{
"id": "manga-jo986949",
"thumbnail_url": "https://avt.mkklcdnv6temp.com/27/p/22-1602825472.jpg",
"title": "Memorize",
"latest_chapter_title": "Chapter 69",
"latest_chapter": 69,
"latest_chapter_url": "https://readmanganato.com/manga-jo986949/chapter-69",
"views_count": 39037474,
"authors": ["Jeongha", "Ro Yujin"],
"last_updated": "Oct-31-2021 14:32",
"url": "https://readmanganato.com/manga-jo986949"
},
{
"id": "manga-uj971844",
"thumbnail_url": "https://avt.mkklcdnv6temp.com/3/c/14-1583489799.jpg",
"title": "Vampire Knight Memories",
"latest_chapter_title": "Chapter 33",
"latest_chapter": 33,
"latest_chapter_url": "https://readmanganato.com/manga-uj971844/chapter-33",
"views_count": 1853526,
"authors": ["ji", "tom"],
"last_updated": "Jul-10-2021 03:33",
"url": "https://readmanganato.com/manga-uj971844"
}
]
}
這是我用來獲取和顯示的組件 dummy_data.json
fetcher.tsx
import axios from "axios"
export async function get<T>(path: string): Promise<T> {
const { data } = await axios.get(path)
return data
}
mangaList.tsx
import React, { useEffect, useState } from "react"
import { get } from "../fetcher"
export default function MangaList() {
const [data, setData] = useState<Manga[]>([])
const getData = async () => {
try {
const result = await get<Manga[]>("/dummy_data.json")
setData(result)
} catch (err) {
throw err
}
console.log("manga data: ", data)
}
useEffect(() => {
getData()
}, [])
return (
<div>
<h2>Welcome to Manga Online</h2>
// some code ...
</div>
)
}
當我重定向到 時/MangaList，控制臺會說GET http://localhost:8800/api/dummy_data.json 404 (Not Found)。Axios 仍在使用axios.defaults.baseURL來獲取不相關的資料。
uj5u.com熱心網友回復：
您正在使用axios defaultUrl. 但是在您的情況下，最好使用 axios 實體而不是更新axios default引數。
這就是我們如何創建 axios 實體。
// axios instance 1
import axios from 'axios'
const axiosInstanceRemote = axios.create({
baseUrl: "http://localhost:8800/api"
)}
你的請求是這樣的：
const requests = {
get: <T>(url: string) => axiosInstanceRemote .get<T>(url).then(responseBody),
post: <T>(url: string, body: {}) =>
axiosInstanceRemote .post<T>(url, body).then(responseBody),
...similar
}
在這里，您使用的是特定實體而不是 axios 默認值。
對于您的本地 api 呼叫：
// fetch.jsx
import axios from "axios"
export async function get<T>(path: string): Promise<T> {
const { data } = await axios.get(path)
return data
}
您可以創建另一個實體（類似于具有不同基本 url 的實體 1）或使用默認的 axios 請求。
這是官方檔案。
uj5u.com熱心網友回復：
從axios 檔案你有baseURL和url
baseURL將url在提出請求時添加到。所以，你可以定義baseURL為http://127.0.0.1:8800，使您的請求/url
// `url` is the server URL that will be used for the request url: '/user', // `baseURL` will be prepended to `url` unless `url` is absolute. // It can be convenient to set `baseURL` for an instance of axios to pass relative URLs // to methods of that instance. baseURL: 'https://some-domain.com/api/',
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/344931.html