javascript에서 fetch()를 사용하여 JSON 파일을 읽는 방법은 무엇입니까?

javascript에서 fetch()를 사용하여 JSON 파일을 읽는 방법은 무엇입니까?

javascript에서 fetch 기능이 있는 로컬 JSON 파일을 읽으려면 어떻게 해야 하나요?덤프 데이터가 포함된 JSON 파일과 서버에 있는 JSON 파일을 읽을 수 있는 기능이 하나 있습니다.예를 들어 다음과 같습니다.

readJson () {
   console.log(this)
   let vm = this
   // http://localhost:8080
   fetch('/Reading/api/file').then((response) => response.json()).then(json => {
       vm.users = json
       console.log(vm.users)
   }).catch(function () {
       vm.dataError = true
   })
}

그러면 이 가져오기 함수에서 로컬 json 파일을 읽으려면 어떻게 해야 합니까?

javascript에서 fetch 기능이 있는 로컬 JSON 파일을 읽으려면 어떻게 해야 하나요?

당신이 읽으려고 한다면http://localhost:8080/Reading/api/file

...그렇다면 당신이 하고 있는 일은 정확합니다만, 당신이 놓치고 있는 것은.ok체크(이것은 일반적인 실수이기 때문에 블로그에 투고하고 있습니다).또한 화살표 기능을 사용하고 있기 때문에let vm = this;원하는 경우를 제외하고, 화살표 기능이 닫힙니다. this. 그래서:

readJson () {
   // http://localhost:8080
   fetch('/Reading/api/file')
   .then(response => {
       if (!response.ok) {
           throw new Error("HTTP error " + response.status);
       }
       return response.json();
   })
   .then(json => {
       this.users = json;
       //console.log(this.users);
   })
   .catch(function () {
       this.dataError = true;
   })
}

이것은 비동기라는 것을 명심하는 것이 중요합니다.readJson반환 전this.users가치가 있습니다.나중에 취득할 수 있습니다.언제 받을지 알고 싶으면 약속을 돌려줘 발신자 코드가then그 위에:

readJson () {
   // http://localhost:8080
   return fetch('/Reading/api/file')
   // ...

다음 질문에 대한 자세한 답변:

• 비동기 콜에서 응답을 반환하려면 어떻게 해야 하나요?
• 함수 내부에서 변수를 수정해도 변경되지 않는 이유는 무엇입니까? - 비동기 코드 참조

당신이 읽으려고 한다면/Reading/api/file파일 시스템에서

...웹 서버 프로세스를 통해 파일을 제공하지 않는 경우(페이지를 제공하는 것처럼 보이는 경우) 적어도 일부 브라우저에서는 파일을 제공할 수 없습니다.그런 다음 위와 같이 해당 서버 프로세스의 URL을 통해 읽습니다.

그렇지 않으면 로컬 파일을 읽으려면 사용자는 파일을 특정해야 합니다.input type="file"드롭존으로 끌어다 놓을 수도 있습니다.그러면 파일 API를 통해 읽을 수 있습니다.fetch.

매우 간단한 Fetch API가 있습니다.

다음과 같이 간단하게 사용할 수 있습니다.

// Replace ./data.json with your JSON feed
fetch('./data.json').then(response => {
  return response.json();
}).then(data => {
  // Work with JSON data here
  console.log(data);
}).catch(err => {
  // Do something for an error here
});

언급URL : https://stackoverflow.com/questions/51859358/how-to-read-json-file-with-fetch-in-javascript