Axios не работает, а fetch работает
я хочу получить данные (массив) из /{url}, и я пробовал этот код
// Fetch the list on first mount
componentDidMount() {
this.getList();
}
// Retrieves the list of items from the Express app
getList = () => {
fetch('/main')
.then(res => res.json())
.then(list => this.setState({ list }))
}
это работает нормально, но потом я решил переключиться на axios и попробовал буквально тот же код
// Fetch the list on first mount
componentDidMount() {
this.getList();
}
// Retrieves the list of items from the Express app
getList = () => {
axios.get('/main')
.then(res=> res.json())
.then(list => this.setState({list}))
}
но это не сработало и дало мне ошибку в этой строке: .then(res=> res.json()) поэтому я не знаю, в чем проблема, если кто-нибудь знает ключ, я буду рад, если вы скажете мне
Ответы 3
Это связано с тем, что аксиомы имеют другой ответ, вместо res.json() возвращают данные уже как: return res.data или передают их непосредственно в состояние что-то вроде
getList = () => {
axios.get('/main')
.then(res=> this.setState({list: res.data}))
ответ от axios - это объект данных (оболочка с большим количеством дополнительных данных) для доступа к данным, обслуживаемым с экспресс-сервера, вам необходимо получить доступ data внутри такого объекта, как response.data
и какой тип экземпляра является ответом от выборки?
здесь проверьте документы axios github.com/аксиос/аксиос и это о выборке. scotch.io/tutorials/… ...
// Fetch the list on first mount
componentDidMount() {
this.getList();
}
// Retrieves the list of items from the Express app
getList = () => {
axios.get('/main')
.then(res=> res.data)
.then(list => this.setState({list}))
.catch(error => this.setState({error: error.message}))
}
я бы порекомендовал некоторые изменения в вашем дизайне, так как я успешно использую axios во многих проектах, это не требование, но помогает и работает очень надежно:
Создайте сервис наподобие api.js
import axios from 'axios';
export default axios.create({
baseURL: `http://my.api.url/`
});Тогда вы можете использовать его так
import API from '../Services/api'; // this is your service you created before
LoadStats = async event => {
try {
var response = await API.get('api/targetroute');
if (response.data != null) {
this.setState({
stats: {
mydata: response.data
}
});
console.info('Receiving result: '+JSON.stringify(response.data));
}
} catch (error) {
console.info('ERROR: '+error)
}
}спасибо, как я заметил, вы изменили код на асинхронный, но я думал, что axios уже был асинхронным с Promise API
axios всегда возвращает обещание, поэтому всегда возникает асинхронный вопрос, как обрабатывать обещание в вашем коде. есть несколько способов: использование подписок или обработка промисов с помощью /catch или использование асинхронного декоратора — все они обрабатывают промисы с другим дизайном программного обеспечения. я обычно предпочитаю использовать асинхронный декоратор, так как я исхожу из С#, и мне нравится поток программирования, который он позволяет ... конечно, иногда лучше просто подписаться на событие, я лично думаю, что цепочка обещаний, тогда / catch - это не так, как это абсолютный беспорядок, но это мое личное мнение
если вы спросите меня, нет необходимости в baseUrl (по крайней мере, в моем случае), потому что я его не использую, и он все еще не блокирует запрос на перекрестное происхождение
мне нравится ясность и красота, поэтому, используя несколько API / маршрутов / сервисов, мне нужно только изменить базовые URL-адреса, изменить серверы и т. д. обычно у вас есть несколько маршрутов для каждого API, поэтому в целом все маршруты имеют базовый URL-адрес, конечно, это личный дизайн, делайте, как хотите :) что вы подразумеваете под ... все еще не блокирующим CORS?
о, я забыл сказать, что я использую модуль cors на стороне сервера, но я думаю, что все было бы хорошо, если бы у меня его не было, да, он не блокирует CORS
я буду рад, если вы сможете помочь мне с вопросом, это действительно раздражает stackoverflow.com/questions/55167140/…
Ну, запросы от клиентов блокируются, если они выполняются в соответствии с той же политикой происхождения, и на стороне сервера не определено исключение CORS. В целом это проблема безопасности браузера/клиента. Перед отправкой запроса (из браузера/клиента) браузер отправляет предварительный запрос параметров, чтобы проверить, разрешен ли запрос CORS.. (если это не SOP) в большинстве случаев вы можете установить плагин браузера cors для разработки целей. в производстве вы определяете CORS на стороне сервера. это не влияет на дизайн программного обеспечения с использованием службы и базового URL-адреса
Эй, @Jake, я посмотрел, но как раз в этот момент кто-то дал хороший ответ. если у вас есть дополнительные вопросы, просто дайте нам знать :)
я тоже проголосовал за вас и ваш комментарий, возможно, есть проблема в Stackoverflow
это сработало, но вы можете сказать, почему? какой тип ответа у axios?