🌱 이번엔 역시나 당연한 듯 사용해왔던 axios의 정확한 의미와 사용법을 정리해둡시다! 🌱
(참고 자료: https://chaeyoung2.tistory.com/51, https://github.com/axios/axios)
npm install axios
axios.get('/url')
.then(function(response){
// 성공한 경우 실행
})
.catch(function (error){
// 에러인 경우 실행
})
.then(function (){
// 항상 실행
});
axios.get('/url', {
params: {
name: 'value'
}
})
.then(function(response){
// 성공한 경우 실행
})
.catch(function (error){
// 에러인 경우 실행
})
.then(function (){
// 항상 실행
});
axios({
method: 'get',
url: '/url',
params: {
name: 'value'
}
})
.then(function(response){
// 성공한 경우 실행
})
.catch(function (error){
// 에러인 경우 실행
});
{
// `url` is the server URL that will be used for the request
url: '/user',
// `method` is the request method to be used when making the request
method: 'get', // default
// `baseURL` will be prepended to `url` unless `url` is absolute.
// It can be convenient to set `baseURL` for an instance of axios to pass relative URLs
// to methods of that instance.
baseURL: 'https://some-domain.com/api/',
// `headers` are custom headers to be sent
headers: {'X-Requested-With': 'XMLHttpRequest'},
// `params` are the URL parameters to be sent with the request
// Must be a plain object or a URLSearchParams object
params: {
ID: 12345
},
// `data` is the data to be sent as the request body
// Only applicable for request methods 'PUT', 'POST', 'DELETE , and 'PATCH'
// When no `transformRequest` is set, must be of one of the following types:
// - string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams
// - Browser only: FormData, File, Blob
// - Node only: Stream, Buffer
data: {
firstName: 'Fred'
},
// syntax alternative to send data into the body
// method post
// only the value is sent, not the key
data: 'Country=Brasil&City=Belo Horizonte',
// HTTP Basic 인증
// `auth` indicates that HTTP Basic auth should be used, and supplies credentials.
// This will set an `Authorization` header, overwriting any existing
// `Authorization` custom headers you have set using `headers`.
// Please note that only HTTP Basic auth is configurable through this parameter.
// For Bearer tokens and such, use `Authorization` custom headers instead.
auth: {
username: 'janedoe',
password: 's00pers3cret'
},
// `responseType` indicates the type of data that the server will respond with
// options are: 'arraybuffer', 'document', 'json', 'text', 'stream'
// browser only: 'blob'
responseType: 'json', // default
// `responseEncoding` indicates encoding to use for decoding responses (Node.js only)
// Note: Ignored for `responseType` of 'stream' or client-side requests
responseEncoding: 'utf8', // default
}
{
// `data` is the response that was provided by the server
data: {},
// `status` is the HTTP status code from the server response
status: 200,
// `statusText` is the HTTP status message from the server response
statusText: 'OK',
// `headers` the HTTP headers that the server responded with
// All header names are lower cased and can be accessed using the bracket notation.
// Example: `response.headers['content-type']`
headers: {},
// `config` is the config that was provided to `axios` for the request
config: {},
// `request` is the request that generated this response
// It is the last ClientRequest instance in node.js (in redirects)
// and an XMLHttpRequest instance in the browser
request: {}
}
const form = new FormData();
form.append('k1','v1');
form.append('k2','v2');
axios({
url: '/url',
method: 'post,
data: form
})
.then( ...
-> 이번 플젝에서 서버로 오디오파일 전송할 때 FormData 형식을 몰라 몇시간을 날렸었다.. 정확히 알아둡시다🐬!