Как в AJAX запросе получить файл?

Question

[sinevik]

Расположение файлов


Файл auto.json



Пытаюсь в реакте подключится получить данный файл, и в дальнейшем работать с данными. В консоли браузера пишет Null, подскажите где ошибка в запросе?

import React from "react";
import PageOne from "./pageone";


class Main extends React.Component {
	constructor(props){
		super(props);
			this.state = {
					WeatherObj:null
			}
		}
	componentWillMount(){
		this.getWeather();
	}
	getWeather(){
		let req = new XMLHttpRequest();
		req.onload = () => {
			this.setState({WeatherObj:req.response});
		}
		req.open("GET", "auto.json", true);
		req.responseType = "json";
		req.send();
	}


	render() {		
		let weather = this.state.WeatherObj;
		console.log(weather);
      	return(

      		<button>Запустить</button>
      	)
   	
	

	}

}
export default Main;

Answer 1

[Максим]

"/auto.json"
или полный URL пропишите (htpp://localhost/blabla)

Comments

[sinevik]

Прописал не работает
Так у меня localhost нет, просто в папке файл

[sinevik]

Преподаватель на курсах сказал просто прописывайте путь к файлу и оно зароботает

[Максим]

sinevik, полный путь к файлу пропишите тогда, от самого корня.

[sinevik]

"D:\frontend\Резюме\авто\Youtube\auto.json"
Вот так?

[Максим]

sinevik, ну хотя бы так. Но у вас русские буквы скорее всего сломают все, их надо декодировать (может ошибаюсь), поэтому чтобы не объяснять - лучше переименуйте директорию.

[sinevik]

Максим,

Подчеркивает синим

[Максим]

sinevik, потому что нужно экранировать такие слэши. Везде их сделайте двойными. ( 'D:\\frontend\\summary\\auto\\Youtube\\auto.json')
Для примера на будущее, \n например, обозначает новую строку. А \\ превращается в одинарный \
Не уверен как на windows, но может придется все слэши сделать в другую сторону, если не заведется.

[sinevik]

NetworkError: A network error occurred.
И обратные и такие слэши

[sinevik]

21 век. не могу файл считать.

[Максим]

sinevik, https://learn.javascript.ru/ajax-xmlhttprequest#%D...

откройте браузер, в нем откройте (через меню или перетаскиванием) ваш json файл. Скопируйте из браузерной строки все что будет, и поставьте это в ваш req.open

[sinevik]

Сделал
file:///D:/frontend/summary/auto/src/auto.json
Ошибка сервере уже нет, но в консоли все равно null

[sinevik]

Интересно, может есть служба поддержки. Я бы прописал пару ласковых ..........б.... ллл

[Максим]

sinevik, запрос то выполнился? (надо смотреть вкладку network). Смотреть что внутри req теперь есть (консоль лог (req) перед setState ) и из него вытащить данные.
Если не получится - напишите мне на почту свой скайп, вечерком решим.

[sinevik]

Может его можно залить куда нибудь на сервер? В инете?

Answer 2

[Сергей Сунцев]

Могу порекомендовать fetch или axios

Так же могу посоветовать протестировать путь до файла, если делаете get запрос, то файл, по заданному пути, аналогично можно открыть в адресной строке.

Comments

[Максим]

Сергей Сунцев, зачем рекомендовать fetch/axios? Человек делает минималистичный примерчик с нативным XHR запросом - это лучшее, что он может сделать в начале пути по изучению такой темы.
Остальное - абсолютно верно, нужно проверить путь и проверить, что файл доступен. Однако, говорят что там никакого сервера нет, но это уже новые данные подъехали )

[Сергей Сунцев]

Максим, Я XHR запросы научился делать уже только, после того, как научился fetch. Мне они кажутся сложней. Но и сейчас не понимаю, какое они дают преимущество...

[Максим]

Сергей Сунцев, перед нативным fetch для данного вопроса - преимущества нет. Но в целом, у fetch до сих пор(?) нет возможности отмены запроса.
Для данного же вопроса, считаю полезным научиться делать нативный xhr запрос, который хорошо описан там же у Кантора, это правильно. Сам я, так же научился делать $.ajax запросы на порядок раньше, чем понял куда надо копать и где читать.