ネットワークを学ぶ fetch関数、REST API、JSON、部分的な更新、メソッド、PATCH
ハンズオンJavaScript (あんどうやすし(著)、オライリー・ジャパン)の13章(ネットワークを学ぶ)、13.9(練習問題)の13-1、13-2の解答を求めてみる。
入出力結果(Google Chrome, DevTools, Console)
fetch('https://jsonplaceholder.typicode.com/posts')
.then(response => response);
Promise {<pending>}__proto__: Promisecatch: ƒ catch()constructor: ƒ Promise()finally: ƒ finally()then: ƒ then()Symbol(Symbol.toStringTag): "Promise"__proto__: Object[[PromiseState]]: "fulfilled"[[PromiseResult]]: Response
fetch('https://jsonplaceholder.typicode.com/posts')
.then(response => response.json())
.then(json => console.log(json));
Promise {<pending>}
VM818:3 (100) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
fetch('https://jsonplaceholder.typicode.com/posts/comments')
.then(response => response.json())
.then(json => console.log(json));
Promise {<pending>}
VM823:1 GET https://jsonplaceholder.typicode.com/posts/comments 404
(anonymous) @ VM823:1
VM823:3 {}
fetch('https://jsonplaceholder.typicode.com/posts/1/comments')
.then(response => response.json())
.then(json => console.log(json));
Promise {<pending>}
VM828:3 (5) [{…}, {…}, {…}, {…}, {…}]0: {postId: 1, id: 1, name: "id labore ex et quam laborum", email: "Eliseo@gardner.biz", body: "laudantium enim quasi est quidem magnam voluptate …utem quasi↵reiciendis et nam sapiente accusantium"}1: {postId: 1, id: 2, name: "quo vero reiciendis velit similique earum", email: "Jayne_Kuhic@sydney.com", body: "est natus enim nihil est dolore omnis voluptatem n…iatur↵nihil sint nostrum voluptatem reiciendis et"}2: {postId: 1, id: 3, name: "odio adipisci rerum aut animi", email: "Nikita@garfield.biz", body: "quia molestiae reprehenderit quasi aspernatur↵aut …mus et vero voluptates excepturi deleniti ratione"}3: {postId: 1, id: 4, name: "alias odio sit", email: "Lew@alysha.tv", body: "non et atque↵occaecati deserunt quas accusantium u…r itaque dolor↵et qui rerum deleniti ut occaecati"}4: {postId: 1, id: 5, name: "vero eaque aliquid doloribus et culpa", email: "Hayden@althea.biz", body: "harum non quasi et ratione↵tempore iure ex volupta…ugit inventore cupiditate↵voluptates magni quo et"}length: 5__proto__: Array(0)
fetch('https://jsonplaceholder.typicode.com/posts/1/comments')
.then(response => response.json())
.then(json => {
for (let comment of json.filter(o => o.id == 1)) {
console.log(comment);
}
});
Promise {<pending>}
VM833:5 {postId: 1, id: 1, name: "id labore ex et quam laborum", email: "Eliseo@gardner.biz", body: "laudantium enim quasi est quidem magnam voluptate …utem quasi↵reiciendis et nam sapiente accusantium"}
fetch('https://jsonplaceholder.typicode.com/posts/1/comments')
.then(response => response.json())
.then(json => {
for (let comment of json.filter(o => o.id == 1)) {
console.log(comment.body);
}
});
Promise {<pending>}
VM838:5 laudantium enim quasi est quidem magnam voluptate ipsam eos
tempora quo necessitatibus
dolor quam autem quasi
reiciendis et nam sapiente accusantium
fetch('https://jsonplaceholder.typicode.com/posts/1/', {
method: 'PATCH',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ body: 'Wryyy' })
})
.then(response => response.json())
.then(json => console.log(json));
Promise {<pending>}
VM843:7 {userId: 1, id: 1, title: "sunt aut facere repellat provident occaecati excepturi optio reprehenderit", body: "Wryyy"}body: "Wryyy"id: 1title: "sunt aut facere repellat provident occaecati excepturi optio reprehenderit"userId: 1__proto__: Object