Vue에서 Axios로 HTTP 클라이언트 인스턴스 만들기

저는 사무실에서 새로운 프로젝트에 배정되었고 Vue, Symfony, Postgres 기술 스택을 선택하여 애플리케이션을 개발했습니다.

문제

앱이 프론트엔드와 백엔드로 분리되어 있어서 API 호출을 많이 하게 됩니다. 동일한 코드 줄을 계속해서 작성하지 못하도록 인스턴스를 만들려면 어떻게 해야 합니까? 코드의 가독성을 향상시키려면 어떻게 해야 합니까? 이것들은 내가 해결해야 할 문제입니다.

목표

제 목표는 모든 HTTP 요청 - 응답 및 헤더 - 를 쉽게 관리하는 인스턴스를 만드는 것입니다.

전제 조건

이것이 우리에게 필요한 도구입니다.

VS Code 또는 기타 텍스트 편집기

터미널

NodeJS

VueJS

악시오스

해결책

이제 준비가 되었습니다! 코딩을 시작할 수 있습니다. 먼저 Vue-CLI를 설치합니다.

npm install -g @vue/cli

이제 명령줄 도구를 통해 Vue 프로젝트를 생성합니다. 나는 기본 설정을 선택했고 자유롭게 구성할 수 있습니다.

vue create test-proj
-----------------------------------------------
🎉  Successfully created project test-proj.
👉  Get started with the following commands:
 $ cd test-proj
 $ npm run serve

그런 다음 프로젝트의 루트 폴더로 이동하여 강력한 Axios 패키지를 설치합니다.

npm install axios --save
----------------------
+ [email protected]
added 1 package from 1 contributor and audited 23811 packages in 12.657s
found 0 vulnerabilities

다음 단계는 인스턴스에 대한 레이어를 만드는 것입니다. 레이어 이름을 "Service"로 지정하고 js 파일을 추가합니다.

-test-proj
--src
---service
----index.js

Axios를 가져와야 하고 빈 화살표 함수도 내보냈습니다.

import axios from 'axios';


export default () => {};

이제 Axios 인스턴스를 생성할 수 있습니다. 처음에는 서버 URL만 정의하겠습니다. 따라서 모든 요청은 이 기본 URL을 사용하고 우리가 제공할 URL 확장자를 연결합니다.

import axios from 'axios';

export default () => {
  const options = {};
  options.baseURL = 'http://localhost:3000/api/';
  const instance = axios.create(options);
  return instance;
};

백엔드는 JWT 프로토콜을 사용하여 경로를 보호합니다. 따라서 Authorization 헤더를 정의해야 합니다. index.js를 아래와 같이 수정합니다. 객체를 기본값과 함께 매개변수로 전달하고 헤더에 Authorization 속성을 추가했습니다. Axios는 true를 전달하면 요청에 JWT 토큰을 포함합니다.

import axios from 'axios';

export default ({ requiresAuth = false } = {}) => {
  const options = {};
  options.baseURL = 'http://localhost:3000';

  //? Decide add token or not
  if (requiresAuth) {
    options.headers.Authorization = 'JWT TOKEN'
  }
  const instance = axios.create(options);
  return instance;
};

글쎄, 우리는 서비스 인스턴스를 만들었습니다. 어떻게 사용합니까? 매우 간단합니다.

import service from './index';

export default {
  dummyData() {
    return service({ requiresAtuh: true }).get('dummyData');
  }
};

좋아, 인스턴스로 돌아가자. 우리는 무엇을 더 할 수 있습니까? 사실 그것은 우리의 상상에 국한되지만 한 가지를 더 추가하겠습니다. 모든 요청-응답이 실행되기 전에 간섭할 수 있습니다.

import axios from 'axios';

export default ({ requiresAuth = false } = {}) => {
  const options = {};
  options.baseURL = 'http://localhost:3000';

  if (requiresAuth) {
    options.headers.Authorization = 'JWT TOKEN'
  }
  const instance = axios.create(options);

  instance.interceptors.response.use(response => {
    console.log('good boi!');
    return response;
  }, error => {
    return Promise.reject(error);
  });
  return instance;
};

방금 추가했습니다interceptors.response.use  . 요청이 성공하면 첫 번째 콜백이 처리되고 요청이 실패하면 두 번째 콜백이 처리됩니다. 또한 응답과 오류를 반환하는 것을 잊지 마십시오. 그렇지 않으면 우리가 호출하는 함수는 응답이나 오류를 반환하지 않습니다.

끝

그래서 우리는 끝에 도달했고 쉽게 관리할 수 있는 인스턴스를 만들었습니다.
이 접근 방식을 사용하면 Http 요청에 동일한 옵션과 헤더가 있으므로 동일한 코드를 계속해서 다시 작성할 필요가 없습니다.
또한 각 호출에 대한 요청과 응답을 쉽게 변경할 수 있습니다. 다음 기사에서 만나요, 생산적인 하루 보내세요!

Ahmet Eren Yatkın