Viewing: ja.javascript.info

JavaScript

AJAX (Asynchronous Javascript And Xml)XML :

fetch() fetch

let promise = fetch(url, [options])

url URL
options :

promise

promise Response resolve

HTTP

promise fetch HTTP reject 404 500 HTTP

ok boolean, HTTP 200-299 true
status HTTP .

          let response = await fetch(url);

if (response.ok) { // HTTP  200-299 
  // ()
  let json = await response.json();
} else {
  alert("HTTP-Error: " + response.status);
}
        

Response promise :

response.json() JSON
response.text()
response.formData() FormData (form/multipart encoding) ,
response.blob() Blob () ,
response.arrayBuffer() ArrayBuffer () ,
, response.body ReadableStream

Github JSON :

let response = await fetch('https://api.github.com/repos/javascript-tutorial/en.javascript.info/commits');

let commits = await response.json(); //  JSON 

alert(commits[0].author.login);

promise :

fetch('https://api.github.com/repos/javascript-tutorial/en.javascript.info/commits')
  .then(response => response.json())
  .then(commits => alert(commits[0].author.login));

          let response = await fetch('https://api.github.com/repos/javascript-tutorial/en.javascript.info/commits');

let text = await response.text(); // 

alert(text.slice(0, 80) + '...');

(blob Blob ):

let response = await fetch('/article/fetch/logo-fetch.svg');

let blob = await response.blob(); // Blob 

// <img> 
let img = document.createElement('img');
img.;
document.body.append(img);

// 
img.src = URL.createObjectURL(blob);

setTimeout(() => { // 3
  img.remove();
  URL.revokeObjectURL(img.src);
}, 3000);

response.text() response.json()

          let text = await response.text(); // 
let parsed = await response.json(); //  ()
        

Headers

response.headers Map

let response = await fetch('https://api.github.com/repos/javascript-tutorial/en.javascript.info/commits');

// 1
alert(response.headers.get('Content-Type')); // application/json; charset=utf-8

// 
for (let [key, value] of response.headers) {
  alert(`${key} = ${value}`);
}

headers :

          let response = fetch(protectedUrl, {
  headers: {
    Authentication: 'abcdef'
  }
});
        

HTTP :

Accept-Charset, Accept-Encoding
Access-Control-Request-Headers
Access-Control-Request-Method
Connection
Content-Length
Cookie, Cookie2
Date
DNT
Expect
Host
Keep-Alive
Origin
Referer
TE
Trailer
Transfer-Encoding
Upgrade
Via
Proxy-*
Sec-*

HTTP

POST

POSTfetch :

method HTTP , e.g. POST,
body :
- (e.g. JSON),
- FormData , form/multipart ,
- Blob/BufferSource ,
- URLSearchParams, x-www-form-urlencoded

user JSON :

let user = {
  name: 'John',
  surname: 'Smith'
};

let response = await fetch('/article/fetch-basics/post/user', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json;charset=utf-8'
  },
  body: JSON.stringify(user)
});

let result = await response.json();
alert(result.message);

(body)Content-Type text/plain application/json headers

Blob BufferSource

<canvas> submit :

<body style="margin:0">
  <canvas id="canvasElem" width="100" height="80" style="border:1px solid"></canvas>

  <input type="button" value="Submit" onclick="submit()">

  <script>
    canvasElem.onmousemove = function(e) {
      let ctx = canvasElem.getContext('2d');
      ctx.lineTo(e.clientX, e.clientY);
      ctx.stroke();
    };

    async function submit() {
      let blob = await new Promise(resolve => canvasElem.toBlob(resolve, 'image/png'));
      let response = await fetch('/article/fetch-basics/post/image', {
        method: 'POST',
        body: blob
      });
      let result = await response.json();
      alert(result.message);
    }

  </script>
</body>

Content-Type Blob (toBlob image/png)

submit() async/await :

          function submit() {
  canvasElem.toBlob(function(blob) {
    fetch('/article/fetch-basics/post/image', {
      method: 'POST',
      body: blob
    })
      .then(response => response.json())
      .then(result => alert(JSON.stringify(result, null, 2)))
  }, 'image/png');
}
        

fetch await :

          let response = await fetch(url, options); //  resolve 
let result = await response.json(); //  json 
        

promise :

          fetch(url, options)
  .then(response => response.json())
  .then(result => /* result  */)
        

response.status HTTP ,
response.ok 200-299 true
response.headers HTTP Map

response.json() JSON ,
response.text() ,
response.formData() FormData (form/multipart encoding) ,
response.blob() Blob () ,
response.arrayBuffer() ArrayBuffer () ,

fetch :

method HTTP ,
headers (),
body string/FormData/BufferSource/Blob/UrlSearchParams

Github

Github ()Github Github getUsers(names)

USERNAME Github url https://api.github.com/users/USERNAME

1 fetch
null

fetch('https://api.github.com/users/USERNAME').
200 JS .json()

fetch 200 null

          async function getUsers(names) {
  let jobs = [];

  for(let name of names) {
    let job = fetch(`https://api.github.com/users/${name}`).then(
      successResponse => {
        if (successResponse.status != 200) {
          return null;
        } else {
          return successResponse.json();
        }
      },
      failResponse => {
        return null;
      }
    );
    jobs.push(job);
  }

  let results = await Promise.all(jobs);

  return results;
}
        

: .then fetch .json()

await Promise.all(names.map(name => fetch()...))) .json() .json() fetch JSON

async/await Promise API

Fetch

Headers

POST

Github