Có một thuật ngữ ô “AJAX” [viết tắt là JavaScript và XML không đồng bộ] cho các yêu cầu mạng từ JavaScript. Mặc dù vậy, chúng tôi không phải sử dụng XML. thuật ngữ này xuất phát từ thời xa xưa, đó là lý do tại sao từ đó có. Bạn có thể đã nghe thuật ngữ đó rồi
Có nhiều cách để gửi yêu cầu mạng và nhận thông tin từ máy chủ
Phương pháp
let response = await fetch[url];
if [response.ok] { // if HTTP-status is 200-299
// get the response body [the method explained below]
let json = await response.json[];
} else {
alert["HTTP-Error: " + response.status];
}
4 hiện đại và linh hoạt, vì vậy chúng ta sẽ bắt đầu với nó. Nó không được hỗ trợ bởi các trình duyệt cũ [có thể được điền đầy đủ], nhưng được hỗ trợ rất tốt trong số các trình duyệt hiện đạiCú pháp cơ bản là
let promise = fetch[url, [options]]
5 – URL để truy cậplet response = await fetch[url]; if [response.ok] { // if HTTP-status is 200-299 // get the response body [the method explained below] let json = await response.json[]; } else { alert["HTTP-Error: " + response.status]; }
6 – tham số tùy chọn. phương thức, tiêu đề, v.v.let response = await fetch[url]; if [response.ok] { // if HTTP-status is 200-299 // get the response body [the method explained below] let json = await response.json[]; } else { alert["HTTP-Error: " + response.status]; }
Không có
let response = await fetch[url];
if [response.ok] { // if HTTP-status is 200-299
// get the response body [the method explained below]
let json = await response.json[];
} else {
alert["HTTP-Error: " + response.status];
}
6, đây là một yêu cầu GET đơn giản, tải xuống nội dung của let response = await fetch[url];
if [response.ok] { // if HTTP-status is 200-299
// get the response body [the method explained below]
let json = await response.json[];
} else {
alert["HTTP-Error: " + response.status];
}
5Trình duyệt bắt đầu yêu cầu ngay lập tức và trả về lời hứa rằng mã gọi sẽ sử dụng để nhận kết quả
Nhận phản hồi thường là một quá trình gồm hai giai đoạn
Đầu tiên,
let response = await fetch[url];
if [response.ok] { // if HTTP-status is 200-299
// get the response body [the method explained below]
let json = await response.json[];
} else {
alert["HTTP-Error: " + response.status];
}
9, được trả về bởi let url = '//api.github.com/repos/javascript-tutorial/en.javascript.info/commits';
let response = await fetch[url];
let commits = await response.json[]; // read response body and parse as JSON
alert[commits[0].author.login];
0, giải quyết bằng một đối tượng của lớp dựng sẵn ngay khi máy chủ phản hồi với các tiêu đềỞ giai đoạn này, chúng ta có thể kiểm tra trạng thái HTTP, để xem nó có thành công hay không, hãy kiểm tra các tiêu đề, nhưng chưa có phần thân
Lời hứa từ chối nếu
let url = '//api.github.com/repos/javascript-tutorial/en.javascript.info/commits';
let response = await fetch[url];
let commits = await response.json[]; // read response body and parse as JSON
alert[commits[0].author.login];
0 không thể thực hiện yêu cầu HTTP, e. g. sự cố mạng hoặc không có trang web nào như vậy. Trạng thái HTTP bất thường, chẳng hạn như 404 hoặc 500 không gây ra lỗiChúng ta có thể thấy trạng thái HTTP trong thuộc tính phản hồi
2 – Mã trạng thái HTTP, e. g. 200let url = '//api.github.com/repos/javascript-tutorial/en.javascript.info/commits'; let response = await fetch[url]; let commits = await response.json[]; // read response body and parse as JSON alert[commits[0].author.login];
3 – boolean,let url = '//api.github.com/repos/javascript-tutorial/en.javascript.info/commits'; let response = await fetch[url]; let commits = await response.json[]; // read response body and parse as JSON alert[commits[0].author.login];
4 nếu mã trạng thái HTTP là 200-299let url = '//api.github.com/repos/javascript-tutorial/en.javascript.info/commits'; let response = await fetch[url]; let commits = await response.json[]; // read response body and parse as JSON alert[commits[0].author.login];
Ví dụ
let response = await fetch[url];
if [response.ok] { // if HTTP-status is 200-299
// get the response body [the method explained below]
let json = await response.json[];
} else {
alert["HTTP-Error: " + response.status];
}
Thứ hai, để lấy nội dung phản hồi, chúng ta cần sử dụng một lệnh gọi phương thức bổ sung
let url = '//api.github.com/repos/javascript-tutorial/en.javascript.info/commits';
let response = await fetch[url];
let commits = await response.json[]; // read response body and parse as JSON
alert[commits[0].author.login];
5 cung cấp nhiều phương thức dựa trên lời hứa để truy cập phần thân ở nhiều định dạng khác nhau
6 – đọc phản hồi và gửi lại dưới dạng văn bản,let url = '//api.github.com/repos/javascript-tutorial/en.javascript.info/commits'; let response = await fetch[url]; let commits = await response.json[]; // read response body and parse as JSON alert[commits[0].author.login];
7 – phân tích phản hồi dưới dạng JSON,let url = '//api.github.com/repos/javascript-tutorial/en.javascript.info/commits'; let response = await fetch[url]; let commits = await response.json[]; // read response body and parse as JSON alert[commits[0].author.login];
8 – trả lại phản hồi dưới dạng đối tượnglet url = '//api.github.com/repos/javascript-tutorial/en.javascript.info/commits'; let response = await fetch[url]; let commits = await response.json[]; // read response body and parse as JSON alert[commits[0].author.login];
9 [được giải thích trong chương tiếp theo],let url = '//api.github.com/repos/javascript-tutorial/en.javascript.info/commits'; let response = await fetch[url]; let commits = await response.json[]; // read response body and parse as JSON alert[commits[0].author.login];
0 – trả về phản hồi dưới dạng Blob [dữ liệu nhị phân có loại],fetch['//api.github.com/repos/javascript-tutorial/en.javascript.info/commits'] .then[response => response.json[]] .then[commits => alert[commits[0].author.login]];
1 – trả về phản hồi dưới dạng ArrayBuffer [biểu diễn dữ liệu nhị phân ở mức độ thấp],fetch['//api.github.com/repos/javascript-tutorial/en.javascript.info/commits'] .then[response => response.json[]] .then[commits => alert[commits[0].author.login]];
- Ngoài ra,
2 là một đối tượng, nó cho phép bạn đọc từng đoạn của phần thân, chúng ta sẽ xem một ví dụ saufetch['//api.github.com/repos/javascript-tutorial/en.javascript.info/commits'] .then[response => response.json[]] .then[commits => alert[commits[0].author.login]];
Chẳng hạn, hãy lấy một đối tượng JSON với các cam kết mới nhất từ GitHub
let url = '//api.github.com/repos/javascript-tutorial/en.javascript.info/commits';
let response = await fetch[url];
let commits = await response.json[]; // read response body and parse as JSON
alert[commits[0].author.login];
Hoặc, tương tự nếu không có
fetch['//api.github.com/repos/javascript-tutorial/en.javascript.info/commits']
.then[response => response.json[]]
.then[commits => alert[commits[0].author.login]];
3, sử dụng cú pháp lời hứa thuần túyfetch['//api.github.com/repos/javascript-tutorial/en.javascript.info/commits']
.then[response => response.json[]]
.then[commits => alert[commits[0].author.login]];
Để nhận văn bản phản hồi, hãy
fetch['//api.github.com/repos/javascript-tutorial/en.javascript.info/commits']
.then[response => response.json[]]
.then[commits => alert[commits[0].author.login]];
4 thay vì fetch['//api.github.com/repos/javascript-tutorial/en.javascript.info/commits']
.then[response => response.json[]]
.then[commits => alert[commits[0].author.login]];
5let response = await fetch['//api.github.com/repos/javascript-tutorial/en.javascript.info/commits'];
let text = await response.text[]; // read response body as text
alert[text.slice[0, 80] + '...'];
Như một trường hợp trưng bày để đọc ở định dạng nhị phân, hãy tìm nạp và hiển thị hình ảnh biểu trưng của thông số kỹ thuật "tìm nạp" [xem chương Blob để biết chi tiết về các hoạt động trên
fetch['//api.github.com/repos/javascript-tutorial/en.javascript.info/commits']
.then[response => response.json[]]
.then[commits => alert[commits[0].author.login]];
6]let response = await fetch['/article/fetch/logo-fetch.svg'];
let blob = await response.blob[]; // download as Blob object
// create for it
let img = document.createElement['img'];
img.style = 'position:fixed;top:10px;left:10px;width:100px';
document.body.append[img];
// show it
img.src = URL.createObjectURL[blob];
setTimeout[[] => { // hide after three seconds
img.remove[];
URL.revokeObjectURL[img.src];
}, 3000];
Quan trọng
Chúng tôi chỉ có thể chọn một phương pháp đọc cơ thể
Nếu chúng tôi đã nhận được phản hồi với
let url = '//api.github.com/repos/javascript-tutorial/en.javascript.info/commits';
let response = await fetch[url];
let commits = await response.json[]; // read response body and parse as JSON
alert[commits[0].author.login];
6, thì let url = '//api.github.com/repos/javascript-tutorial/en.javascript.info/commits';
let response = await fetch[url];
let commits = await response.json[]; // read response body and parse as JSON
alert[commits[0].author.login];
7 sẽ không hoạt động vì nội dung cơ thể đã được xử lýlet text = await response.text[]; // response body consumed
let parsed = await response.json[]; // fails [already consumed]
Các tiêu đề phản hồi có sẵn trong một đối tượng tiêu đề giống như Bản đồ trong
fetch['//api.github.com/repos/javascript-tutorial/en.javascript.info/commits']
.then[response => response.json[]]
.then[commits => alert[commits[0].author.login]];
9Nó không chính xác là một Bản đồ, nhưng nó có các phương thức tương tự để lấy các tiêu đề riêng lẻ theo tên hoặc lặp lại chúng
let response = await fetch['//api.github.com/repos/javascript-tutorial/en.javascript.info/commits'];
// get one header
alert[response.headers.get['Content-Type']]; // application/json; charset=utf-8
// iterate over all headers
for [let [key, value] of response.headers] {
alert[`${key} = ${value}`];
}
Để đặt tiêu đề yêu cầu trong
let url = '//api.github.com/repos/javascript-tutorial/en.javascript.info/commits';
let response = await fetch[url];
let commits = await response.json[]; // read response body and parse as JSON
alert[commits[0].author.login];
0, chúng ta có thể sử dụng tùy chọn let response = await fetch['//api.github.com/repos/javascript-tutorial/en.javascript.info/commits'];
let text = await response.text[]; // read response body as text
alert[text.slice[0, 80] + '...'];
1. Nó có một đối tượng với các tiêu đề gửi đi, như thế nàylet response = fetch[protectedUrl, {
headers: {
Authentication: 'secret'
}
}];
…Nhưng có một danh sách mà chúng ta không thể thiết lập
2,let response = await fetch['//api.github.com/repos/javascript-tutorial/en.javascript.info/commits']; let text = await response.text[]; // read response body as text alert[text.slice[0, 80] + '...'];
3let response = await fetch['//api.github.com/repos/javascript-tutorial/en.javascript.info/commits']; let text = await response.text[]; // read response body as text alert[text.slice[0, 80] + '...'];
4let response = await fetch['//api.github.com/repos/javascript-tutorial/en.javascript.info/commits']; let text = await response.text[]; // read response body as text alert[text.slice[0, 80] + '...'];
5let response = await fetch['//api.github.com/repos/javascript-tutorial/en.javascript.info/commits']; let text = await response.text[]; // read response body as text alert[text.slice[0, 80] + '...'];
6let response = await fetch['//api.github.com/repos/javascript-tutorial/en.javascript.info/commits']; let text = await response.text[]; // read response body as text alert[text.slice[0, 80] + '...'];
7let response = await fetch['//api.github.com/repos/javascript-tutorial/en.javascript.info/commits']; let text = await response.text[]; // read response body as text alert[text.slice[0, 80] + '...'];
8,let response = await fetch['//api.github.com/repos/javascript-tutorial/en.javascript.info/commits']; let text = await response.text[]; // read response body as text alert[text.slice[0, 80] + '...'];
9let response = await fetch['//api.github.com/repos/javascript-tutorial/en.javascript.info/commits']; let text = await response.text[]; // read response body as text alert[text.slice[0, 80] + '...'];
0let response = await fetch['/article/fetch/logo-fetch.svg']; let blob = await response.blob[]; // download as Blob object // create for it let img = document.createElement['img']; img.style = 'position:fixed;top:10px;left:10px;width:100px'; document.body.append[img]; // show it img.src = URL.createObjectURL[blob]; setTimeout[[] => { // hide after three seconds img.remove[]; URL.revokeObjectURL[img.src]; }, 3000];
1let response = await fetch['/article/fetch/logo-fetch.svg']; let blob = await response.blob[]; // download as Blob object // create for it let img = document.createElement['img']; img.style = 'position:fixed;top:10px;left:10px;width:100px'; document.body.append[img]; // show it img.src = URL.createObjectURL[blob]; setTimeout[[] => { // hide after three seconds img.remove[]; URL.revokeObjectURL[img.src]; }, 3000];
2let response = await fetch['/article/fetch/logo-fetch.svg']; let blob = await response.blob[]; // download as Blob object // create for it let img = document.createElement['img']; img.style = 'position:fixed;top:10px;left:10px;width:100px'; document.body.append[img]; // show it img.src = URL.createObjectURL[blob]; setTimeout[[] => { // hide after three seconds img.remove[]; URL.revokeObjectURL[img.src]; }, 3000];
3let response = await fetch['/article/fetch/logo-fetch.svg']; let blob = await response.blob[]; // download as Blob object // create for it let img = document.createElement['img']; img.style = 'position:fixed;top:10px;left:10px;width:100px'; document.body.append[img]; // show it img.src = URL.createObjectURL[blob]; setTimeout[[] => { // hide after three seconds img.remove[]; URL.revokeObjectURL[img.src]; }, 3000];
4let response = await fetch['/article/fetch/logo-fetch.svg']; let blob = await response.blob[]; // download as Blob object // create for it let img = document.createElement['img']; img.style = 'position:fixed;top:10px;left:10px;width:100px'; document.body.append[img]; // show it img.src = URL.createObjectURL[blob]; setTimeout[[] => { // hide after three seconds img.remove[]; URL.revokeObjectURL[img.src]; }, 3000];
5let response = await fetch['/article/fetch/logo-fetch.svg']; let blob = await response.blob[]; // download as Blob object // create for it let img = document.createElement['img']; img.style = 'position:fixed;top:10px;left:10px;width:100px'; document.body.append[img]; // show it img.src = URL.createObjectURL[blob]; setTimeout[[] => { // hide after three seconds img.remove[]; URL.revokeObjectURL[img.src]; }, 3000];
6let response = await fetch['/article/fetch/logo-fetch.svg']; let blob = await response.blob[]; // download as Blob object // create for it let img = document.createElement['img']; img.style = 'position:fixed;top:10px;left:10px;width:100px'; document.body.append[img]; // show it img.src = URL.createObjectURL[blob]; setTimeout[[] => { // hide after three seconds img.remove[]; URL.revokeObjectURL[img.src]; }, 3000];
7let response = await fetch['/article/fetch/logo-fetch.svg']; let blob = await response.blob[]; // download as Blob object // create for it let img = document.createElement['img']; img.style = 'position:fixed;top:10px;left:10px;width:100px'; document.body.append[img]; // show it img.src = URL.createObjectURL[blob]; setTimeout[[] => { // hide after three seconds img.remove[]; URL.revokeObjectURL[img.src]; }, 3000];
8let response = await fetch['/article/fetch/logo-fetch.svg']; let blob = await response.blob[]; // download as Blob object // create for it let img = document.createElement['img']; img.style = 'position:fixed;top:10px;left:10px;width:100px'; document.body.append[img]; // show it img.src = URL.createObjectURL[blob]; setTimeout[[] => { // hide after three seconds img.remove[]; URL.revokeObjectURL[img.src]; }, 3000];
9let response = await fetch['/article/fetch/logo-fetch.svg']; let blob = await response.blob[]; // download as Blob object // create for it let img = document.createElement['img']; img.style = 'position:fixed;top:10px;left:10px;width:100px'; document.body.append[img]; // show it img.src = URL.createObjectURL[blob]; setTimeout[[] => { // hide after three seconds img.remove[]; URL.revokeObjectURL[img.src]; }, 3000];
0let text = await response.text[]; // response body consumed let parsed = await response.json[]; // fails [already consumed]
1let text = await response.text[]; // response body consumed let parsed = await response.json[]; // fails [already consumed]
2let text = await response.text[]; // response body consumed let parsed = await response.json[]; // fails [already consumed]
3let text = await response.text[]; // response body consumed let parsed = await response.json[]; // fails [already consumed]
Các tiêu đề này đảm bảo HTTP phù hợp và an toàn, vì vậy chúng được kiểm soát độc quyền bởi trình duyệt
Để thực hiện yêu cầu
let text = await response.text[]; // response body consumed
let parsed = await response.json[]; // fails [already consumed]
4 hoặc yêu cầu bằng phương pháp khác, chúng ta cần sử dụng tùy chọn let url = '//api.github.com/repos/javascript-tutorial/en.javascript.info/commits';
let response = await fetch[url];
let commits = await response.json[]; // read response body and parse as JSON
alert[commits[0].author.login];
0
6 – Phương thức HTTP, e. g.let text = await response.text[]; // response body consumed let parsed = await response.json[]; // fails [already consumed]
4,let text = await response.text[]; // response body consumed let parsed = await response.json[]; // fails [already consumed]
8 – cơ quan yêu cầu, một tronglet text = await response.text[]; // response body consumed let parsed = await response.json[]; // fails [already consumed]
- một chuỗi [e. g. được mã hóa JSON],
- Đối tượng
9, để gửi dữ liệu dưới dạnglet url = '//api.github.com/repos/javascript-tutorial/en.javascript.info/commits'; let response = await fetch[url]; let commits = await response.json[]; // read response body and parse as JSON alert[commits[0].author.login];
0,let response = await fetch['//api.github.com/repos/javascript-tutorial/en.javascript.info/commits']; // get one header alert[response.headers.get['Content-Type']]; // application/json; charset=utf-8 // iterate over all headers for [let [key, value] of response.headers] { alert[`${key} = ${value}`]; }
6/fetch['//api.github.com/repos/javascript-tutorial/en.javascript.info/commits'] .then[response => response.json[]] .then[commits => alert[commits[0].author.login]];
2 để gửi dữ liệu nhị phân,let response = await fetch['//api.github.com/repos/javascript-tutorial/en.javascript.info/commits']; // get one header alert[response.headers.get['Content-Type']]; // application/json; charset=utf-8 // iterate over all headers for [let [key, value] of response.headers] { alert[`${key} = ${value}`]; }
- URLSearchParams, để gửi dữ liệu dưới dạng mã hóa
3, hiếm khi được sử dụnglet response = await fetch['//api.github.com/repos/javascript-tutorial/en.javascript.info/commits']; // get one header alert[response.headers.get['Content-Type']]; // application/json; charset=utf-8 // iterate over all headers for [let [key, value] of response.headers] { alert[`${key} = ${value}`]; }
Định dạng JSON được sử dụng hầu hết thời gian
Ví dụ: mã này gửi đối tượng
let response = await fetch['//api.github.com/repos/javascript-tutorial/en.javascript.info/commits'];
// get one header
alert[response.headers.get['Content-Type']]; // application/json; charset=utf-8
// iterate over all headers
for [let [key, value] of response.headers] {
alert[`${key} = ${value}`];
}
4 dưới dạng JSONlet user = {
name: 'John',
surname: 'Smith'
};
let response = await fetch['/article/fetch/post/user', {
method: 'POST',
headers: {
'Content-Type': 'application/json;charset=utf-8'
},
body: JSON.stringify[user]
}];
let result = await response.json[];
alert[result.message];
Xin lưu ý, nếu yêu cầu
let text = await response.text[]; // response body consumed
let parsed = await response.json[]; // fails [already consumed]
8 là một chuỗi, thì tiêu đề let response = await fetch['//api.github.com/repos/javascript-tutorial/en.javascript.info/commits'];
// get one header
alert[response.headers.get['Content-Type']]; // application/json; charset=utf-8
// iterate over all headers
for [let [key, value] of response.headers] {
alert[`${key} = ${value}`];
}
6 được đặt thành let response = await fetch['//api.github.com/repos/javascript-tutorial/en.javascript.info/commits'];
// get one header
alert[response.headers.get['Content-Type']]; // application/json; charset=utf-8
// iterate over all headers
for [let [key, value] of response.headers] {
alert[`${key} = ${value}`];
}
7 theo mặc địnhTuy nhiên, vì chúng tôi sẽ gửi JSON, thay vào đó, chúng tôi sử dụng tùy chọn
let response = await fetch['//api.github.com/repos/javascript-tutorial/en.javascript.info/commits'];
let text = await response.text[]; // read response body as text
alert[text.slice[0, 80] + '...'];
1 để gửi let response = await fetch['//api.github.com/repos/javascript-tutorial/en.javascript.info/commits'];
// get one header
alert[response.headers.get['Content-Type']]; // application/json; charset=utf-8
// iterate over all headers
for [let [key, value] of response.headers] {
alert[`${key} = ${value}`];
}
9, chính xác là let response = await fetch['//api.github.com/repos/javascript-tutorial/en.javascript.info/commits'];
// get one header
alert[response.headers.get['Content-Type']]; // application/json; charset=utf-8
// iterate over all headers
for [let [key, value] of response.headers] {
alert[`${key} = ${value}`];
}
6 cho dữ liệu được mã hóa JSONChúng tôi cũng có thể gửi dữ liệu nhị phân với
let url = '//api.github.com/repos/javascript-tutorial/en.javascript.info/commits';
let response = await fetch[url];
let commits = await response.json[]; // read response body and parse as JSON
alert[commits[0].author.login];
0 bằng cách sử dụng các đối tượng fetch['//api.github.com/repos/javascript-tutorial/en.javascript.info/commits']
.then[response => response.json[]]
.then[commits => alert[commits[0].author.login]];
6 hoặc let response = await fetch['//api.github.com/repos/javascript-tutorial/en.javascript.info/commits'];
// get one header
alert[response.headers.get['Content-Type']]; // application/json; charset=utf-8
// iterate over all headers
for [let [key, value] of response.headers] {
alert[`${key} = ${value}`];
}
2Trong ví dụ này, có một
let response = fetch[protectedUrl, {
headers: {
Authentication: 'secret'
}
}];
4 mà chúng ta có thể vẽ bằng cách di chuột qua nó. Một cú nhấp chuột vào nút “gửi” sẽ gửi hình ảnh đến máy chủlet response = await fetch[url];
if [response.ok] { // if HTTP-status is 200-299
// get the response body [the method explained below]
let json = await response.json[];
} else {
alert["HTTP-Error: " + response.status];
}
0Xin lưu ý, ở đây chúng tôi không đặt tiêu đề
let response = await fetch['//api.github.com/repos/javascript-tutorial/en.javascript.info/commits'];
// get one header
alert[response.headers.get['Content-Type']]; // application/json; charset=utf-8
// iterate over all headers
for [let [key, value] of response.headers] {
alert[`${key} = ${value}`];
}
6 theo cách thủ công, bởi vì đối tượng fetch['//api.github.com/repos/javascript-tutorial/en.javascript.info/commits']
.then[response => response.json[]]
.then[commits => alert[commits[0].author.login]];
6 có loại tích hợp sẵn [ở đây let response = fetch[protectedUrl, {
headers: {
Authentication: 'secret'
}
}];
7, như được tạo bởi let response = fetch[protectedUrl, {
headers: {
Authentication: 'secret'
}
}];
8]. Đối với các đối tượng fetch['//api.github.com/repos/javascript-tutorial/en.javascript.info/commits']
.then[response => response.json[]]
.then[commits => alert[commits[0].author.login]];
6, loại đó trở thành giá trị của let response = await fetch['//api.github.com/repos/javascript-tutorial/en.javascript.info/commits'];
// get one header
alert[response.headers.get['Content-Type']]; // application/json; charset=utf-8
// iterate over all headers
for [let [key, value] of response.headers] {
alert[`${key} = ${value}`];
}
6