Axios: ํ‚ค ๊ฐ’์ด ์žˆ๋Š” ๋งค๊ฐœ๋ณ€์ˆ˜ ๋ฐฐ์—ด ๊ฐ€์ ธ์˜ค๊ธฐ

์— ๋งŒ๋“  2017๋…„ 09์›” 20์ผ  ยท  3์ฝ”๋ฉ˜ํŠธ  ยท  ์ถœ์ฒ˜: axios/axios

์•ˆ๋…•ํ•˜์„ธ์š”,

๊ฒ€์ƒ‰ํ•ด๋ดค๋Š”๋ฐ ๋ฐฉ๋ฒ•์ด ์—†๋„ค์š”. ๊ธฐ๋ณธ์ ์œผ๋กœ ์ด์™€ ๊ฐ™์€ ๋ฐฐ์—ด ๋งค๊ฐœ๋ณ€์ˆ˜๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ GET ์š”์ฒญ์„ ๋ณด๋‚ด๊ณ  ์‹ถ์Šต๋‹ˆ๋‹ค.

GET /comments?filter[post]=3&filter[author]=12

๋‚˜๋Š” ์ด๊ฒƒ์„ ์‹œ๋„ํ–ˆ๋‹ค

params: {
  filter: {post: 3, author: 12}
}

๊ทธ๋Ÿฌ๋‚˜ ์—ฌ์ „ํžˆ ์šด์ด ์—†์Šต๋‹ˆ๋‹ค :(

ํžŒํŠธ๊ฐ€ ์žˆ๋‚˜์š”?

๊ฐ์‚ฌ ํ•ด์š”

๊ฐ€์žฅ ์œ ์šฉํ•œ ๋Œ“๊ธ€

@ghprod ๋‹˜ , ์šฐ์„  ์ €๋Š” ์ด ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์— ๊ธฐ์—ฌํ•œ ์‚ฌ๋žŒ๋„ ์‚ฌ์šฉํ•˜์ง€ ์•Š๋Š”๋‹ค๋Š” ์ ์„ ๋ถ„๋ช…ํžˆ ํ•˜๊ณ 

Axios๋Š” ๊ธฐ๋ณธ์ ์œผ๋กœ ์ด๋Ÿฌํ•œ ์ข…๋ฅ˜์˜ ์ธ์ฝ”๋”ฉ์„ ์ง€์›ํ•˜์ง€ ์•Š์ง€๋งŒ ์‚ฌ์šฉ์ž ์ง€์ • ์ง๋ ฌ ๋ณ€ํ™˜๊ธฐ๋ฅผ ์ œ๊ณตํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋‹ค์Œ ์ฝ”๋“œ๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ์ด ์ž‘์—…์„ ๋งค์šฐ ์‰ฝ๊ฒŒ ์ˆ˜ํ–‰ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

// Axios include here...

axios.get('/user', {
    params: {
        filter: {post: 3, author: 12} 
    },
    paramsSerializer: customSerializerFunc
});

๋” ๊ฐ„๋‹จํ•˜๊ฒŒ ๋งŒ๋“ค๊ธฐ ์œ„ํ•ด ์ฟผ๋ฆฌ์ŠคํŠธ๋ง ์ง๋ ฌ ๋ณ€ํ™˜๊ธฐ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์— ๋Œ€ํ•ด ์•ฝ๊ฐ„์˜ ๊ตฌ๊ธ€๋ง์„ ํ–ˆ๊ณ  ๋ธŒ๋ผ์šฐ์ €์™€ nodejs๋ฅผ ์ง€์›ํ•˜๋Š” qs ๋ฅผ ์ฐพ์•˜์Šต๋‹ˆ๋‹ค. ๋‹ค์Œ๊ณผ ๊ฐ™์ด ์ง๋ ฌ ๋ณ€ํ™˜๊ธฐ๋กœ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

// Include axios and qs here...

axios.get('/user', {
    params: {
        filter: {post: 3, author: 12} 
    },
    paramsSerializer: qs.stringify  // If this doesnt work, append .bind(qs) to the end of this line.
});

URL ์ธ์ฝ”๋”ฉ์ด ํ™œ์„ฑํ™”๋˜์–ด ์žˆ๊ธฐ ๋•Œ๋ฌธ์— filter[post]=3 ๋Œ€์‹  filter%5Bpost%5D=3 ๊ฐ€ ํ‘œ์‹œ๋  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋‹ค์Œ๊ณผ ๊ฐ™์ด ๋น„ํ™œ์„ฑํ™”ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

axios.get('/user', {
    params: {
        filter: {post: 3, author: 12} 
    },
    paramsSerializer: function(params) {
        return qs.stringify(params, { encode: false });
    }
});

ํšจ๊ณผ๊ฐ€ ์žˆ์—ˆ๋Š”์ง€ ์•Œ๋ ค์ฃผ์„ธ์š”.
๋ฌธ์•ˆ ์ธ์‚ฌ.

๋ชจ๋“  3 ๋Œ“๊ธ€

@ghprod ๋‹˜ , ์šฐ์„  ์ €๋Š” ์ด ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์— ๊ธฐ์—ฌํ•œ ์‚ฌ๋žŒ๋„ ์‚ฌ์šฉํ•˜์ง€ ์•Š๋Š”๋‹ค๋Š” ์ ์„ ๋ถ„๋ช…ํžˆ ํ•˜๊ณ 

Axios๋Š” ๊ธฐ๋ณธ์ ์œผ๋กœ ์ด๋Ÿฌํ•œ ์ข…๋ฅ˜์˜ ์ธ์ฝ”๋”ฉ์„ ์ง€์›ํ•˜์ง€ ์•Š์ง€๋งŒ ์‚ฌ์šฉ์ž ์ง€์ • ์ง๋ ฌ ๋ณ€ํ™˜๊ธฐ๋ฅผ ์ œ๊ณตํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋‹ค์Œ ์ฝ”๋“œ๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ์ด ์ž‘์—…์„ ๋งค์šฐ ์‰ฝ๊ฒŒ ์ˆ˜ํ–‰ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

// Axios include here...

axios.get('/user', {
    params: {
        filter: {post: 3, author: 12} 
    },
    paramsSerializer: customSerializerFunc
});

๋” ๊ฐ„๋‹จํ•˜๊ฒŒ ๋งŒ๋“ค๊ธฐ ์œ„ํ•ด ์ฟผ๋ฆฌ์ŠคํŠธ๋ง ์ง๋ ฌ ๋ณ€ํ™˜๊ธฐ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์— ๋Œ€ํ•ด ์•ฝ๊ฐ„์˜ ๊ตฌ๊ธ€๋ง์„ ํ–ˆ๊ณ  ๋ธŒ๋ผ์šฐ์ €์™€ nodejs๋ฅผ ์ง€์›ํ•˜๋Š” qs ๋ฅผ ์ฐพ์•˜์Šต๋‹ˆ๋‹ค. ๋‹ค์Œ๊ณผ ๊ฐ™์ด ์ง๋ ฌ ๋ณ€ํ™˜๊ธฐ๋กœ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

// Include axios and qs here...

axios.get('/user', {
    params: {
        filter: {post: 3, author: 12} 
    },
    paramsSerializer: qs.stringify  // If this doesnt work, append .bind(qs) to the end of this line.
});

URL ์ธ์ฝ”๋”ฉ์ด ํ™œ์„ฑํ™”๋˜์–ด ์žˆ๊ธฐ ๋•Œ๋ฌธ์— filter[post]=3 ๋Œ€์‹  filter%5Bpost%5D=3 ๊ฐ€ ํ‘œ์‹œ๋  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋‹ค์Œ๊ณผ ๊ฐ™์ด ๋น„ํ™œ์„ฑํ™”ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

axios.get('/user', {
    params: {
        filter: {post: 3, author: 12} 
    },
    paramsSerializer: function(params) {
        return qs.stringify(params, { encode: false });
    }
});

ํšจ๊ณผ๊ฐ€ ์žˆ์—ˆ๋Š”์ง€ ์•Œ๋ ค์ฃผ์„ธ์š”.
๋ฌธ์•ˆ ์ธ์‚ฌ.

์ž‘๋™ํ•ฉ๋‹ˆ๋‹ค .. :+1:

๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค @ngonzalvez

์ข‹์€ ํ•˜๋ฃจ ๋ณด๋‚ด์„ธ์š” :)

์•ˆ๋…•ํ•˜์„ธ์š”, ์ €๋Š” axios์— ๊ด€ํ•œ ๋„์›€์ด ํ•„์š”ํ•ฉ๋‹ˆ๋‹ค. ์ž…๋ ฅ์—์„œ ๊ฐ’์„ ๊ฐ€์ ธ์™€ axios.get์˜ ๋งค๊ฐœ๋ณ€์ˆ˜์— ๊ฐ’์œผ๋กœ ๋„ฃ๋Š” ๋ฐฉ๋ฒ•์€ ๋ฌด์—‡์ž…๋‹ˆ๊นŒ? ๋‚ด๊ฐ€ ๊ตฌ์ถ•ํ•˜๊ณ  ์žˆ๋Š” ๊ฒ€์ƒ‰ ๊ธฐ๋Šฅ์— ๋Œ€ํ•ด ๋งํ•˜์ž๋ฉด - URL์˜ ์ผ๋ถ€๋Š” ์ฟผ๋ฆฌ ๋งค๊ฐœ๋ณ€์ˆ˜์ž…๋‹ˆ๋‹ค.

์—ฌ๊ธฐ ์ฝ”๋“œ๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค
์•ก์‹œ์˜ค์Šค
.get('http://localhost:8080/customer/search?hint=da')

์—ฌ๊ธฐ์„œ ํžŒํŠธ = "searchText"

๋„์™€์ฃผ์„ธ์š”.

๊ฐ์‚ฌ ํ•ด์š”!

์ด ํŽ˜์ด์ง€๊ฐ€ ๋„์›€์ด ๋˜์—ˆ๋‚˜์š”?
0 / 5 - 0 ๋“ฑ๊ธ‰