axios와 Vue를 결합하여 사용하는 방법제시와 기교.

제가 처음에 스페인어로 썼어요.🇪🇸 내 블로그:
Guía de uso de Vue y axios
VueJS는 Angular와 반대로 미리 정의된 HTTP 호출 방법이 없습니다.사용자는 그가 선택한 모든 라이브러리를 사용할 수도 있고, 라이브러리를 아예 사용하지 않을 수도 있다.예를 들어, Javascript의 fetch 방법을 사용하여 Vue에서 API 호출을 수행할 수 있습니다.
Axios는 API 호출을 하는 가장 유행하는 라이브러리 중 하나로 추상적으로 API 호출에 필요한 코드를 줄인다.예를 들어 axios를 사용하면 JSON 응답을 해석할 필요가 없고 요청의 기본 URL을 매번 전달할 필요가 없습니다.
따라서 본고에서 Axios를 배우기 위해 우리는 Axios를 이용하여 예시 항목을 만들 것이다.

선결 조건

먼저 Vue 프로젝트가 필요합니다.vuecli를 사용하여 프로젝트를 만들면,cli는axios에 대한 정보를 물어볼 것입니다. 따라서 프로젝트에axios를 설치했을 수도 있습니다.axios가 설치되었는지 확인하려면 패키지를 보십시오.json 및 axios 패키지를 검색합니다.
axios를 설치하지 않으면 npm을 사용하여 설치할 수 있습니다.

npm install axios

또는 사선을 사용하는 경우 다음을 사용할 수 있습니다.

yarn add axios

그런 다음 끝점이 있는 API가 필요합니다.API가 없다면 걱정하지 마십시오. 왜냐하면 우리는 본문에서 예시 API를 사용할 것입니다.
본고에서 우리는 JSON Placeholder를 사용할 것입니다. 원한다면 마음대로 사용할 수 있습니다.
https://jsonplaceholder.typicode.com/
마지막으로 Vue의 기본 개념에 대해 알아야 합니다.이 문서에서는 구성 요소를 만들 때 Vue 라이프 사이클에서 생성된 방법을 사용하여 요청합니다.Vue 라이프 사이클에 대한 자세한 내용은 본문 작성자를 참조하십시오.
:

전보를 받다

GET의 목적은 정보를 검색하는 것입니다.백그라운드에서 페이지를 열 때 브라우저는 방문 중인 페이지를 검색하기 위해 GET 호출을 보냅니다. 페이지의 모든 자원 (css 파일, 이미지, js 파일 등) 도 마찬가지입니다.
API 호출에 대한 GET 응답은 일반적으로 정보가 포함된 JSON을 반환합니다.
먼저 생성할 때 API를 호출하는 구성 요소를 만듭니다.

<template>
  <div class="content"></div>
</template>

<script>
import axios from "axios";
export default {
  created() {
    axios.get("https://jsonplaceholder.typicode.com/todos/1").then((result) => {
      console.log(result.data);
    })
  }
};
</script>

<style scoped lang="scss">
</style>

보시다시피 우리는 구성 요소에서axios를 가져오고 JSON Placeholder API의 URL 호출 axios.get() 을 사용합니다. 이렇게 간단합니다.
Axios는 해석된 데이터 속성에 대한 JSON 응답을 포함하는promise를 되돌려줍니다.
이 구성 요소를 만들면 브라우저의 콘솔에서 다음과 같은 내용을 볼 수 있습니다.

뷰 또는 기타 메소드 또는 계산 속성에서 응답을 사용하려면 Vue 데이터 내에 새 변수를 생성해야 합니다.

<template>
  <div class="content">{{ todos }}</div>
</template>

<script>
import axios from "axios";
export default {
  data: () => ({
    todos: null
  }),
  created() {
    axios.get("https://jsonplaceholder.typicode.com/todos/1").then((result) => {
      this.todos = result.data;
    })
  }
};
</script>

<style scoped lang="scss">
</style>

POST 통화

백엔드 점은 일반적으로 객체를 작성하는 데 사용됩니다.예를 들어 데이터베이스에 새 사용자를 만들고 싶다면 POST 노드를 사용하여 새 사용자의 정보를 보낼 것이 확실하다.
axios를 사용하여 POST 호출을 하는 것은 GET 호출과 마찬가지로 간단합니다.끝점의 URL 호출.post() 방법을 사용하고 API에 전달해야 할 대상을 사용하여 두 번째 인자를 호출합니다.

<template>
  <div class="content"></div>
</template>

<script>
import axios from "axios";
export default {
  created() {
    let post = {
      title: 'foo',
      body: 'bar',
      userId: 1
    };
    axios.post("https://jsonplaceholder.typicode.com/posts",  post).then((result) => {
      console.log(result);
    });
  }
};
</script>

<style scoped lang="scss">
</style>

전화를 걸다

PUT 호출을 만드는 것은 서버의 컨텐트나 리소스를 편집하기 위한 것입니다.예를 들어, 데이터베이스에서 사용자를 편집하려면 PUT 호출을 사용하는 것이 논리적입니다.
PUT 호출의 구문은 POST의 구문과 같지만 호출할 방법의 이름만 다릅니다. URL과 편집할 대상을 두 번째 매개 변수로 호출해야 합니다axios.put().

created() {
  let post = {
    title: 'foo',
    body: 'bar',
    userId: 1
  };
  axios.put("https://jsonplaceholder.typicode.com/posts/1", post).then((result) => {
    console.log(result);
  });
}
</script>

삭제

삭제란 자원을 삭제하는 것을 가리킨다.axios를 사용하면 삭제할 자원의 URL만 전달할 수 있습니다.

created() {
  axios.delete("https://jsonplaceholder.typicode.com/todos/1");
}

NOTE: There is also the PATCH methods but I don't use it a lot.

내가 추천하는 구조

이것은 나의 개인적인 의견이다.이것은 모든 상황에서 가장 좋은 선택이 아닐 수도 있다.너는 이 해결 방안이 너의 프로젝트에서 의미가 있는지 없는지를 생각해야 한다.
나의 예에서, 내가 해야 할 일은 src에서logic라는 폴더를 만드는 것이다. 그 중에서 나는 하나를 만들었다.모든 실체의 js 파일입니다.나에게 있어서 실체 자체는 원인이 있다. 예를 들어 사용자, 자동차, 동물 등이다.
이 파일에서 내가 해야 할 일은 모든 API 호출을 위한 함수를 만드는 것이다. 요청을 되돌려주기만 하면 된다.예를 들어 보겠습니다.

// src/logic.todos.js

import axios from "axios";
const API = "https://jsonplaceholder.typicode.com/todos";

export default {
  get() {
    return axios.get(API);
  },
  create(todo) {
    return axios.post(API, todo);
  }
};

따라서 이 호출을 사용해야 한다면 de 구성 요소에서 이 파일을 가져오기만 하면 됩니다.

import todos from "@/logic/todos";

필요한 경우 다음을 수행합니다.

async created() {
  let response = await todos.get();
  console.log(response.data);
}

주의해야 할 것은, 여기에서 나는 비동기적/대기 모드의 낡은 문법을 바꾸었다. 왜냐하면 이것은 읽기 쉽기 때문이다.

결론

본고에서 사용한 API(JSON Placeholder)를 사용하면 전체 사이트를 만들어서 TODO를 관리할 수 있습니다. 그러면 모든 API 호출을 연습할 수 있습니다.
제가 제안하는 또 다른 것은 API의 기본 URL을 Vue 환경 변수에 두는 것입니다. 그러면 변수를 한 곳에 저장할 수 있습니다.
내 댓글을 읽어줘서 고마워!너는 나의 트위터에 인사를 하거나 나에게 메시지를 보낼 수 있다.