Блог

Главная - Вопросы по программированию - Отправить запрос в другую службу после указания axios.default.baseUrl

Отправить запрос в другую службу после указания axios.default.baseUrl

#reactjs #axios

Вопрос:

Я новичок в Axios и React, я создаю приложение React, которое выполняет операции CRUD с использованием Axios для извлечения данных из API.

В указанной api/agent.ts мной конфигурации Axios для моего API, который я разработал.

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 , например, я хочу сделать запрос из my 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 для извлечения нерелевантных данных.

Ответ №1:

Вы используете 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
}

вы можете либо создать другой экземпляр (аналогичный экземпляру 1 с другим базовым URL), либо использовать запрос axios по умолчанию.

Вот официальный документ.

Ответ №2:

Из документов axios у вас есть baseUrl и url

baseURL будет добавляться к url при выполнении запросов. Таким образом, вы можете определить baseURL as 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/',
Метки: ,