axios는 너무 쉽고 일반적이라서 따로 공부를 한적이 없다
강의에서 사용하는 것만 보고 따라치면서 별다른 정리없이도 너무 쉽게 사용이 가능했기 때문이다.
하지만 생각보다 좋은 기능들이 많이 있는 것 같다
이번에 다 다루진 못하겠지만 이 페이지에 axios관련 팁들을 정리해보려한다.
axios
- node 환경에서 HTTP 통신을 쉽게 하도록 도와주는 라이브러리
그동안 사용해왔던 방식
- 자바스크립트에서 fetch가 있지만 async, await과 axios를 조합해서 많이 사용했었다.
// e.g., 내가 주로 사용했던 방식
import axios from 'axios';
async function getSomething(param) {
try {
const result = await axios.get(`http api URL?queryString=${param}`);
return result;
} catch(error) {
console.error(error);
}
}axios 관련 팁 정리
모듈로 만들어서 사용하자
// axiosApi.ts
import axios from 'axios';
import baseURL
export const axiosApi = axios.create({
baseURL: "https://catfact.ninja",
});
export type CatFact = {
fact: string;
length: number;
};
// api.ts
export async function getCatFact() {
try {
const result = await axiosApi.get<CatFact>(CATFACT_SUB_URL.fact);
return result;
} catch (error) {
console.error(error);
}
}- baseURL이 혹시 바뀌면 axios를 사용한 모든 페이지에서 바꿔줘야 하므로 instance를 생성해서 export해주는 것이 좋은 것 같다
timeout을 설정할 수 있다.
export const axiosApi = axios.create({
baseURL: CATFACT_URL,
timeout: 2500, // 2.5초 동안 응답이 없으면 에러 발생 -> catch로 전달
});get parmameter 전달
// 기존
axios.get(`https://a.home.page/?queryString=${aText}&queryString1=${bText}`);
// cool
const parameters = {
queryString:aText,
queryString1:bText
}
axios.get('https://a.home.page/', {
params: parameters
});참고
움직이는 만큼 행복해진다