Vue를 사용하여 JavaScript 파일에서 REST API 호출

Question

Vue 페이지에서 완벽하게 작동하는 Axios API 호출이 있습니다. 이를 애플리케이션에서 여러 번 재사용할 수 있는 독립형 호출 가능 모듈로 전환해야 합니다. 모든 시도가 실패합니다. 독립형 js에 대한 경험이 부족한 것인지 아니면 다른 것에 대한 경험이 부족한 것인지 잘 모르겠습니다.

이것은 작동하는 Vue 코드입니다.

<code><템플릿>
  <div>
    <ul v-if="게시물 &&posts.length">
      <li v-for="게시물의 게시물">
        <p><strong>{{post.resID}}</strong></p>
        <p>{{게시물 ​​이름}}</p>
      </li>
    </ul>

    <ul v-if="오류 &&errors.length">
      <li v-for="오류 중 오류">
        {{에러 메시지}}
      </li>
    </ul>
  </div>
</템플릿>

<스크립트>
'axios'에서 axios를 가져옵니다.

기본값 내보내기 {
  이름: "GetMxList",
  데이터() {
    반품 {
      게시물: [],
      오류: []
    }
  },

  // 컴포넌트가 생성되면 게시물을 가져옵니다.
  만들어진() {
    axios.get("http://localhost:8080/rest/...")
    .then(응답 => {
      // JSON 응답이 자동으로 구문 분석됩니다.
      this.posts = response.data
    })
    .catch(e => {
      this.errors.push(e)
    })
  }
}
</스크립트>

<p>Vue 3. 답변 주셔서 감사합니다. 죄송합니다. 명확하게 표현하지 못했습니다. 내 목표는 모듈(rest.js와 유사)을 만든 다음 이를 Pinia에서 사용하는 것입니다. 목표는 한 번 로드한 다음 결과를 자주 사용하는 것입니다. 현재는 getJSONList 호출이 JSON 형식의 답변을 반환하고 애플리케이션 전체에서 사용할 수 있도록 해당 답변을 MyList에 저장하는 다음 코드와 같은 "정적" 로딩과 함께 작동합니다. 따라서 구성 요소는 단순히 Pinia 매핑을 사용합니다. </p>
<pre class="brush:php;toolbar:false;">작업: {

    비동기 fetchList() {
      
      const 데이터 = getJSONList()를 기다립니다;
      this.Mylist = 데이터;
    },

많은 반복. 이는 아무것도 반환하지 않지만 적어도 오류는 발생하지 않습니다...

'axios'에서 axios 가져오기;

내보내기 함수 getJSONList() {
    
    const 나머지 = axios.create({
        baseURL: "http://localhost:8080/rest/", // 더 나은 접근 방식은 환경 변수를 사용하는 것입니다.
      });

    const getPosts = 비동기 () =>
    노력하다 {
      return (rest.get("http://localhost:8080/rest/")을 기다립니다).data;
    } 잡기 (오류) {
      console.error(err.toJSON());
      새로운 오류 발생(err.message);
    }
  };
    반환(getPosts);
}

Answer 1

일반적으로 Axios 부분을 모듈로 옮기고 데이터 사용은 구성 요소에 맡깁니다.

으아악

그러면 구성요소/스토리지/무엇이든...

으아악