Axios는 중첩된 항목을 지원하는 쿼리 파라미터 직렬화를 제공합니다. 이를 활용하여 복잡한 데이터 구조를 가진 객체를 쿼리 문자열로 직렬화할 수 있습니다.
import axios from 'axios';
const params = {
user: {
name: 'John Doe',
age: 30
},
products: ['apple', 'banana', 'orange']
};
axios.get('/api/data', { params })
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error('요청 실패:', error);
});
위의 예시에서 params
객체는 중첩된 항목을 가지고 있습니다. 이 객체를 Axios의 get
메서드에 params
옵션으로 전달하면, Axios는 해당 객체를 쿼리 파라미터로 직렬화하여 GET 요청을 보낼 때 함께 전송합니다.
Axios는 다양한 요청 바디 포맷을 자동으로 직렬화할 수 있습니다.
import axios from 'axios';
const data = {
name: 'John Doe',
age: 30
};
axios.post('/api/data', data, {
headers: {
'Content-Type': 'application/json'
}
})
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error('요청 실패:', error);
});
위의 예시에서 data
객체를 POST 요청의 바디로 전달하고, Content-Type
헤더를 'application/json'
으로 설정하여 JSON으로 직렬화합니다.
import axios from 'axios';
const formData = new FormData();
formData.append('file', file);
axios.post('/api/upload', formData, {
headers: {
'Content-Type': 'multipart/form-data'
}
})
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error('요청 실패:', error);
});
위의 예시에서 FormData
객체를 생성하여 파일 업로드를 위한 POST 요청의 바디로 전달하고, Content-Type
헤더를 'multipart/form-data'
로 설정합니다.
import axios from 'axios';
import qs from 'qs';
const data = {
name: 'John Doe',
age: 30
};
axios.post('/api/data', qs.stringify(data), {
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
})
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error('요청 실패:', error);
});
위의 예시에서 data
객체를 URL 인코딩된 폼으로 직렬화하기 위해 qs.stringify()
함수를 사용하고, Content-Type
헤더를 'application/x-www-form-urlencoded'
로 설정합니다.
Axios를 사용하여 HTML 폼을 JSON으로 게시할 수도 있습니다.
import axios from 'axios';
const form = document.getElementById('myForm');
const formData = new FormData(form);
axios.post('/api/data', Object.fromEntries(formData), {
headers: {
'Content-Type': 'application/json'
}
})
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error('요청 실패:', error);
});
위의 예시에서는 HTML 폼을 FormData
객체로 생성하고, 이를 Object.fromEntries()
를 사용하여 JSON으로 변환하여 POST 요청의 바디로 전달합니다. 이때 Content-Type
헤더를 'application/json'
으로 설정합니다.
Axios는 응답에서 자동으로 JSON 데이터를 처리합니다.
import axios from 'axios';
axios.get('/api/data')
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error('요청 실패:', error);
});
위의 예시에서 response.data
를 통해 서버로부터 받은 JSON 데이터에 접근할 수 있습니다. Axios는 응답의 Content-Type이 'application/json'
인 경우, 자동으로 JSON 데이터로 파싱하여 제공합니다.
Axios는 브라우저와 노드.js에서 진행 상황을 캡처하고 추가 정보(속도, 남은 시간 등)를 제공합니다. 또한, 노드.js에서 대역폭 제한을 설정할 수도 있습니다.
import axios from 'axios';
import { createReadStream } from 'fs';
import { createWriteStream } from 'fs';
// 노드.js에서 진행 상황 캡처
axios.get('/api/data', {
onDownloadProgress: progressEvent => {
const { loaded, total } = progressEvent;
const percentCompleted = Math.round((loaded * 100) / total);
console.log(`다운로드 진행률: ${percentCompleted}%`);
},
onUploadProgress: progressEvent => {
const { loaded, total } = progressEvent;
const percentCompleted = Math.round((loaded * 100) / total);
console.log(`업로드 진행률: ${percentCompleted}%`);
}
})
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error('요청 실패:', error);
});
// 노드.js에서 대역폭 제한 설정
const stream = createReadStream('largefile');
const writeStream = createWriteStream('output');
axios({
method: 'post',
url: '/
api/upload',
data: stream,
maxContentLength: 200000000, // 대역폭 제한 설정
onUploadProgress: progressEvent => {
const { loaded, total } = progressEvent;
const percentCompleted = Math.round((loaded * 100) / total);
console.log(`업로드 진행률: ${percentCompleted}%`);
}
})
.then(response => {
writeStream.write(response.data);
})
.catch(error => {
console.error('요청 실패:', error);
});
위의 예시에서 onDownloadProgress
및 onUploadProgress
콜백을 사용하여 진행 상황을 캡처하고 출력합니다. 또한, 대역폭 제한을 설정하기 위해 maxContentLength
옵션을 사용합니다.
Axios는 FormData 및 Blob과 호환됩니다. 이를 통해 파일 업로드와 관련된 작업을 수행할 수 있습니다.
또한, 클라이언트 측에서 XSRF(CSRF)에 대한 보호 기능을 지원합니다. 이를 위해 서버에서 쿠키 또는 헤더에 CSRF 토큰을 포함시켜 요청을 전송하고, Axios는 자동으로 해당 토큰을 인식하여 요청에 포함시킵니다. 이는 웹 애플리케이션의 보안을 강화하는 데 도움이 됩니다.