vitamin3000 님의 블로그

보통 Axios는 JSON을 사용한다 브라우저브라우저에서는 URLSearchParams API를 사용할 수 있다.const params = new URLSearchParams();params.append('param1', 'value1');params.append('param2', 'value2');axios.post('/foo', params); *주의사항 ! 모든 브라우저가 URLSearchParams를 지원하지 않기에 ..  대안으로, qs 라이브러리를 사용하여 데이터를 인코딩할 수 있다.const qs = require('qs');axios.post('/foo', qs.stringify({ 'bar': 123 }));또는 ES6도 있다.import qs from 'qs';const data = {..

다음과 같이 console.log를 통해 상세한 에러 값을 확인할 수 있다.axios.get('/user/12345') .catch(function (error) { if (error.response) { //요청이 전송되었고 서버튼 2xx 외의 상태 코드로 응답했다. console.log(error.response.data); console.log(error.response.status); console.log(error.response.headers); } else if (error.request) { // 요청이 전송되었지만 응답이 수신되지 않았다 // error.reque..

then 또는 catch로 처리되기 전에 요청과 응답을 가로챌 수 있다. // 요청 인터셉터 추가// 커스텀 인스턴스에서도 인터셉터 추가 가능axios.interceptors.response.use(function (response) { // 응답 데이터가 있는 작업 수행 return response }, function (error) { // 응답 오류가 있는 작업 수행 return Promise.reject(error); }); 나중에 필요할 때 인터셉터를 제거할 수 있다.const myInterceptor = axios.interceptors.requeset.use(function () {/*>..*/});axios.interceptors.request.rejec..

Config 기본 값모든 요청에 적용될 config 기본 값을 지정할 수 있다.전역 Axios 기본값axios.defaults.baseURL = 'http://api.example.com';axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'; 커스텀 인스턴스 기본값// 인스턴스를 생성할 때 config 기본값 설정하기const instance = axios.create({ baseURL: 'https://api.example.com'})// 인스턴스를 만든 후 기본 값 변경하기intance.defaults..

이번 포스트에서는 응답에 대한 어떤 정보를 갖고있는지를 정리해보고자 한다 data는 서버가 제공하는 응답이다data: {} status는 HTTP 상태 코드이다.status: 200 statusText는 HTTP 상태 메시지이다.statusText: 'OK' headers는 HTTP 헤더이다.// 모든 헤더의 이름은 소문자이며, 괄호 표기법을 사용하여 ㅈㅂ근할 수 있다.ex) 'response.headers['content-type']'headers: {} config는 요청을 위해 Axios가 제공하는 구성이다config: {} request는 이번 응답으로 생성된 요청이다// 브라우저에서는 XMLHttpRequest이다.requeset: {} then을 사용하면 아래의 응답을 받는다.axios.get..

이번 포스트에서는 이전의 get, post, put 등에 사용하는 config 옵션을 정리해보고자 한다.1. url은 요청에 사용될 서버 URL 이다.url: '/user'2. method는 요청을 생성할 때 사용되는 메소드이다.metoh: 'get' // 기본값3. header는 사용자 지정 헤더이다headers: {'X-Requested-With': 'XMLHttpRequest'},4. params는 요청과 함께 전송되는 URL 파라미터이다.// 반드시 일반 객체나 URLSearchParams 객체여야 한다.참고로 null이나 undefined는 URL에 렌더링되지 않는다.parmas: { ID: 12345}5. data는 요청 바디로 전송될 데이터이다// PUT, POST, PATCH, DELETE..

axios에 해당 config를 전송하면 요청이 가능하다axios(config)// POST 요청 전송axios({ method: 'post', url: '/user/12345', data: { firstName: 'Fred', lastName: 'Flintstone' }})// node.js에서 GET 요청으로 원격 이미지 가져오기axios({ method: 'get', url: 'http://bit.ly/2mTM3nY', responseType: 'stream' }) .then(function (response){ response.data.pipe(fs.createWriteStream('ada_lovelace.jpg')) }) 여기서 r..

GET 요청 수행하기const axios = require('axios');// 지정된 ID를 가진 유저에 대한 요청axios.get('/user?ID=12345') .then(function (response) { // 성공 핸들링 console.log(response); }) .catch(function (error) { // 에러 핸들링 console.log(error); }) .finally(function () { //항상 실행되는 영역 }); // axios.get('/user?id=12345')는 다음과 같이 변경할 수 있다. axios.get('/user', { params: { ID: 12345..

Axios란?nodje.js와 브라우저를 위한 Promise 기반 HTTP 클라이언트 이다. 특징브라우저를 위해 XMLHttpRequests 생성node.js를 위해 http 요청 생성Promise API를 지원요청 및 응답 인터셉트요청 및 응답 데이터 변환요청 취소JSON 데이터 자동 변환XSRF를 막기 위한 클라이언트 사이드 지원설치 방법아래의 명령어를 실행한다.npm i axios 위에서 나열한 단어중 모르는 단어가 존재했다!XMLHttpRequestsPromise APiXSRF따라서 위의 단어들을 학습해보고 정리하고자 한다. XMLHttpRequestsXMLHttpRequest(XHR) 객체는 서버와 상호작용할 때 사용한다.XHR을 사용하면 페이지의 새로고침 없이도 URL에서 데이터를 가져올 수 ..