在指定axios.default.baseURL后向其他服务发送请求
我对Axios很陌生，我正在创建React应用程序，它可以执行CRUD操作，使用Axios从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从其他服务(而不是来自我在axios.defaults.baseURL中配置的api/agent.ts )发出请求，例如，我想从public文件夹中的dummyData.json发出请求。
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来获取无关的数据。
回答 2
Stack Overflow用户
发布于 2021-11-02 09:27:12
你在使用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请求。
这是官方医生。
Stack Overflow用户
发布于 2021-11-02 09:20:51
从axios博士你有baseURL和url
在提出请求时，baseURL将优先于url。因此，您可以将baseURL定义为http://127.0.0.1:8800，并向/url提出请求。
//
url是用于请求url：'/user‘、//baseURL的服务器URL，除非url是绝对的。//可以方便地为axios实例设置baseURL以将相对URL //传递给该实例的方法。baseURL：'https://some-domain.com/api/'，
https://stackoverflow.com/questions/69807905
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号