무엇을 가져오나요?

가져오기()는 무엇입니까

fetch('https://api.punkapi.com/v2/beers')
  .then(response => response.json())
  .then(beers => console.log(beers));

위는 기본 가져오기 요청입니다. 데이터베이스와 상호 작용하기 위한 JavaScript의 기능입니다. 이 코드를 분석하고 진행 상황을 더 잘 이해하겠습니다.

fetch('https://api.punkapi.com/v2/beers')

fetch()는 두 개의 인수를 사용할 수 있습니다. 하나의 필수 인수, 데이터를 찾고 있는 리소스의 URL. 이것은 GET 요청입니다. API에서 정보를 가져오기만 하면 됩니다. 두 번째 주장에 대해서는 잠시 후에 이야기하겠습니다. 이 첫 번째 코드 줄을 살펴보겠습니다. DevTools를 열고 위 줄을 복사하여 붙여넣으세요.

fetch('https://api.punkapi.com/v2/beers')
Promise {<pending>}

약속 { 보류 중 } ? 이게 뭔가요? 약속은 IOU와 같다고 들었습니다. 어느 시점에서 당신은 응답을 받게 될 것입니다. 원하는 응답을 의미하지는 않습니다. 응답이 오류일 수 있습니다. 이행, 거부 또는 대기 중일 수 있습니다.

코드의 두 번째 줄을 살펴보겠습니다.

.then(resp => resp.json())

가져오기는 API에서 요청한 응답이 있는 이 함수로 약속을 반환하고 이를 json 형식으로 저장합니다.
JSON(JavaScript Object Notation)은 가벼운 데이터 교환 형식입니다. 인간이 읽고 쓰는 것은 쉽다. 기계가 쉽게 구문 분석하고 생성할 수 있습니다. - www.json.org
약속이 이행되었고 이제 일부 데이터가 있음을 알 수 있습니다. 어레이(25)

Promise {<pending>}
__proto__: Promise
[[PromiseState]]: "fulfilled"
[[PromiseResult]]: Array(25)

코드의 세 번째 줄은 최종적으로 데이터를 사용하고 작업을 수행하는 곳입니다.

.then(beers => console.log(beers));

한 번 보자. DevTools에 코드를 넣으면 무엇을 얻을 수 있을까요?

fetch('https://api.punkapi.com/v2/beers')
  .then(response => response.json())
  .then(beers => console.log(beers));
Promise {<pending>}
base.js:8238 
(25) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
0: {id: 1, name: "Buzz", tagline: "A Real Bitter Experience.", first_brewed: "09/2007", description: "A light, crisp and bitter IPA brewed with English and American hops. A small batch brewed only once.", …}
1: {id: 2, name: "Trashy Blonde", tagline: "You Know You Shouldn't", first_brewed: "04/2008", description: "A titillating, neurotic, peroxide punk of a Pale A…the customary BrewDog bite and imaginative twist.", …}
2: {id: 3, name: "Berliner Weisse With Yuzu - B-Sides", tagline: "Japanese Citrus Berliner Weisse.", first_brewed: "11/2015", description: "Japanese citrus fruit intensifies the sour nature of this German classic.", …}
3: {id: 4, name: "Pilsen Lager", tagline: "Unleash the Yeast Series.", first_brewed: "09/2013", description: "Our Unleash the Yeast series was an epic experimen…nols, although it can add a hint of butterscotch.", …}
4: {id: 5, name: "Avery Brown Dredge", tagline: "Bloggers' Imperial Pilsner.", first_brewed: "02/2011", description: "An Imperial Pilsner in collaboration with beer wri…hat rock our world, and the people who make them.", …}
5: {id: 6, name: "Electric India", tagline: "Vibrant Hoppy Saison.", first_brewed: "05/2013", description: "Re-brewed as a spring seasonal, this beer – which …re also added to produce a genuinely unique beer.", …}
6: {id: 7, name: "AB:12", tagline: "Imperial Black Belgian Ale.", first_brewed: "07/2012", description: "An Imperial Black Belgian Ale aged in old Invergor…yberries and blackberries beause they were local.", …}
7: {id: 8, name: "Fake Lager", tagline: "Bohemian Pilsner.", first_brewed: "03/2013", description: "Fake is the new black. Fake is where it is at. Fak…y faux masterpiece with added BrewDog bitterness.", …}
8: {id: 9, name: "AB:07", tagline: "Whisky Cask-Aged Scotch Ale.", first_brewed: "03/2010", description: "Whisky cask-aged imperial scotch ale. Beer perfect… beer capable of holding back the Scottish chill.", …}
9: {id: 10, name: "Bramling X", tagline: "Single Hop IPA Series - 2011.", first_brewed: "01/2011", description: "Good old Bramling Cross is elegant, refined, assur…apple and ginger jam my grandmother used to make.", …}
10: {id: 11, name: "Misspent Youth", tagline: "Milk & Honey Scotch Ale.", first_brewed: "04/2013", description: "The brainchild of our small batch brewer, George W…erously drinkable milk sugar- infused Scotch Ale.", …}
11: {id: 12, name: "Arcade Nation", tagline: "Seasonal Black IPA.", first_brewed: "12/2015", description: "Running the knife-edge between an India Pale Ale a…ryness from the malt bill at each and every turn.", …}
12: {id: 13, name: "Movember", tagline: "Moustache-Worthy Beer.", first_brewed: "11/2009", description: "A deliciously robust, black malted beer with a dec…rovides an enticing backdrop to the Cascade hops.", …}
13: {id: 14, name: "Alpha Dog", tagline: "Existential Red Ale.", first_brewed: "02/2010", description: "A fusion of caramel malt flavours and punchy New Z…hops. A session beer you can get your teeth into.", …}
14: {id: 15, name: "Mixtape 8", tagline: "An Epic Fusion Of Old Belgian, American New Wave, And Scotch Whisky.", first_brewed: "01/2012", description: "This recipe is for the Belgian Tripel base. A blen…, fruity esters, and punchy citrus hop character.", …}
15: {id: 16, name: "Libertine Porter", tagline: "Dry-Hopped Aggressive Porter.", first_brewed: "01/2012", description: "An avalanche of cross-continental hop varieties gi… toffee, bitter chocolate and hints of woodsmoke.", …}
16: {id: 17, name: "AB:06", tagline: "Imperial Black IPA.", first_brewed: "04/2011", description: "Our sixth Abstrakt, this imperial black IPA combin…our favourite American hops. Roasty and resinous.", …}
17: {id: 18, name: "Russian Doll – India Pale Ale", tagline: "Nesting Hop Bomb.", first_brewed: "08/2014", description: "The levels of hops vary throughout the range. We l… and yet still lends different characters to each", …}
18: {id: 19, name: "Hello My Name Is Mette-Marit", tagline: "Lingonberry Double IPA.", first_brewed: "06/2013", description: "We sent this beer to Norway where it was known as …nous bitter edge layered with dry berry tartness.", …}
19: {id: 20, name: "Rabiator", tagline: "Imperial Wheat Beer", first_brewed: "03/2011", description: "Imperial Wheat beer / Weizenbock brewed by a homes…nk banana bread, bubble gum and David Hasselhoff.", …}
20: {id: 21, name: "Vice Bier", tagline: "Hoppy Wheat Bier.", first_brewed: "04/2013", description: "Our take on the classic German Kristallweizen. A c… balanced with the American and New Zealand hops.", …}
21: {id: 22, name: "Devine Rebel (w/ Mikkeller)", tagline: "Oak-aged Barley Wine.", first_brewed: "12/2008", description: "Two of Europe's most experimental, boundary-pushin… and was going to be partially aged in oak casks.", …}
22: {id: 23, name: "Storm", tagline: "Islay Whisky Aged IPA.", first_brewed: "12/2007", description: "Dark and powerful Islay magic infuses this tropica…to the peated smoke imported directly from Islay.", …}
23: {id: 24, name: "The End Of History", tagline: "The World's Strongest Beer.", first_brewed: "06/2011", description: "The End of History: The name derives from the famo…caramel and cloves are intensified by boozy heat.", …}
24: {id: 25, name: "Bad Pixie", tagline: "Spiced Wheat Beer.", first_brewed: "10/2008", description: "2008 Prototype beer, a 4.7% wheat ale with crushed juniper berries and citrus peel.", …}
length: 25
__proto__: Array(0)

이제 이 데이터로 작업할 수 있으니 기대하세요!

fetch('https://api.punkapi.com/v2/beers')
  .then(response => response.json())
  .then(beers => console.log(beers[5].name));

이것은 어떤 맥주를 반환합니까?

5: {id: 6, name: "Electric India", tagline: "Vibrant Hoppy Saison.", first_brewed: "05/2

두 번째 선택적 인수에 대해 이야기해 봅시다. 여기에서 API를 사용하여 몇 가지 작업을 요청할 수 있습니다.

POST - 데이터 추가 요청 중

PATCH - 데이터 편집을 요청 중입니다.

DELETE - 일부 데이터 삭제를 요청 중입니다.

두 번째 인수는 백엔드 및 애플리케이션과 통신할 정보가 있는 JavaScript 개체입니다. POST를 설정하는 한 가지 방법은 다음과 같습니다. reqObj에는 세 개의 키-값 쌍이 있습니다.

let reqObj = {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'Accept': 'application/json'
},

  body: JSON.stringify({
    name:,
    tagline:

})
};

fetch('https://api.punkapi.com/v2/beers, reqObj)
.then(resp => resp.json())
.then(beer => {
console.log(beer)

키-값 쌍을 분석해 보겠습니다.
방법: 'POST' - 백엔드로 보내는 요청입니다.
헤더:
Content-Type은 우리가 보내는 데이터 콘텐츠의 유형입니다.
Accept는 우리가 반환할 데이터 콘텐츠입니다.
body: 문자열 형식의 데이터입니다.

패치를 설정하는 방법은 다음과 같습니다.

fetch(`https://api.punkapi.com/v2/beers/${beerId}`,{
  method: 'PATCH',
  headers: {
   'Content-Type':'application/json'
},
  body: JSON.stringify({
   "new updates"
})
})
.then(resp => resp.json())
.then(beer => {
console.log(beer)
})

참고 이 가져오기에는 bac-tics를 사용했습니다. 우리는 개별 맥주를 편집하고 싶고 그렇게 하려면 특별히 beerId를 사용해야 합니다. 그래서 우리는 beeId를 URL에 보간합니다.

이제 맥주를 삭제하면 코드가 훨씬 줄어듭니다. 우리는 여전히 beerId가 필요하고 메서드만 필요합니다. 이와 같이

fetch(`'https://api.punkapi.com/v2/beers/${beerId}`,{ 
  method: 'DELETE' 
})
.then(resp => resp.json())
.then(beer => {
console.log(beer)
})

이것이 도움이 되었기를 바라며 일부 무료 API 확인https://github.com/public-apis/public-apis을 살펴보십시오.