- Viết một câu request network đơn giản với fetch
- Response Metadata
- Response Types
- Chuỗi Promise
- POST Request
- Gửi thông tin xác thực với Fetch
- Upload file
- Upload nhiều file
fetch() cho phép tạo một network request tương tự như XMLHttpRequest(XHR). Sự khác nhau chủ yếu là Fetch hoạt động theo Promises, cho phép viết gọn ràng, dễ nhớ hơn là XHR. API Fetch có trong window.fetch() giờ đã được hổ trợ phổ biến, bạn không cần polyfill gì đâu, vĩnh biệt IE.
Một câu request network bằng fetch
fetch('/api/some-url')
.then(
function(response) {
if (response.status !== 200) {
console.log('Lỗi, mã lỗi ' + response.status);
return;
}
// parse response data
response.json().then(data => {
console.log(data);
})
}
)
.catch(err => {
console.log('Error :-S', err)
});Response của câu fetch() là một đối tượng Stream, nghĩa là khi chúng ta gọi phương thức json(), một Promise được trả về, vì quá trình đọc stream sẽ diễn ra bất đồng bộ.
Response MetaData
Bên cạnh các dữ liệu chúng ta có thể truy cập như trong ví dụ trên, chúng ta có thể truy cập đến các meta data khác
fetch('/api/some-url')
.then(response => {
console.log(response.headers.get('Content-Type'));
console.log(response.headers.get('Date'));
console.log(response.status);
console.log(response.statusText);
console.log(response.type);
console.log(response.url)
})response.type
Khi chúng ta tạo một fetch request, response trả về sẽ chứa response.type, với một trong 3 giá trị: basic, cors, opaque.
Nó cho biết resource này đến từ đâu, cho chúng ta biết cách chúng ta nên đối xử với object trả về
- Nếu request lên cùng một nhà (ứng dụng host trên server A gửi request lên API trên server A),
response.typesẽ làbasic, không có bất kỳ giới hạn việc xem các thông tin trên response. - Nếu request dạng CORS, nhà em ở Hồ Chí Mình, em quen bạn gái Hà Nội,
typetrả về sẽ làcors.cors, lúc đó bên trongheaderchúng ta chỉ được phép truy cập đếnCache-Control,Content-Language,Content-Type,Expires,Last-ModifiedvàPragma - Type
opaquecho các request tạo ra khác nhà, và thằng server nó không chấp nhận dạng request CORS, ba má cấm chú quen gái Hà Nội, nghĩa là không trả về dữ liệu, không xem được status của request, chia tay tình yêu.
Để khai báo 1 fetch request chỉ resolve khi thõa điều kiện mode
same-origin: các request nhà kế bên sẽ trả vềrejectcors: cho phép nhà khác nếu header trả về cũng là corscors-with-forced-preflightluôn thực hiện kiểm tra preflight. Là trước khi gửi đi, để đảm bảo an toàn, tạo một request dùng phương thức OPTIONS để kiểm tra độ an toàn, (nhà anh có điều kiện ko mà đòi quen bạn gái tận Hà Nội xa xôi)no-corstạo một request không cùng nhà, không trả vềCORS
Để khai báo mode
fetch('http://some-site.com/cors-enabled/some.json', {mode, 'cors'})
.then(function(response) {
return response.text();
})
.then(function(text) {
console.log('Request successful', text);
})
.catch(function(error) {
log('Request failed', error)
});Liên kết Promise
Một trong những tính năng hay (và sinh ra rắc rối) của Promise là cho phép mắc-xích-các-Promise lại với nhau.
Khi làm việc với JSON API, chúng ta quan tâm đến status và parse JSON trả về, để đơn giản hóa, đưa phần xử lý kiểm tra status và parse này ra hàm riêng. Chúng ta chỉ lo xử lý kết quả cuối cùng và trường hợp có lỗi
function status(response) {
if (response.status >= 200 && response.status < 300) {
return Promise.resolve(response)
} else {
return Promise.reject(new Error(response.statusText))
}
}
function json(response) {
return response.json()
}
fetch('')
.then(status)
.then(json)
.then(data => {
console.log('Request succeeded with JSON response', data);
})
.catch(function(error) {
console.log('Request failed', error);
});POST Request
Set giá trị method và body để tạo một POST request
fetch(url, {
method: 'POST',
headers: {
"Content-Type": "application/x-www-form-urlencoded; charset=UTF-8"
},
body: 'foo=bar&lorem=ipsum'
})
.then(json)
.then(data => {
console.log('Request succeeded with JSON response', data);
})
.catch(error => {
console.log('Request failed', error);
});
})Gửi lên dữ liệu dạng JSON
var data = {username: 'example'};
fetch(url, {
method: 'POST',
body: JSON.stringify(data),
headers:{
'Content-Type': 'application/json'
}
})
.then(res => res.json())
.then(response => console.log('Success:', JSON.stringify(response)))
.catch(error => console.error('Error:', error))Gửi thông tin xác thực với Fetch
Để gửi kèm thông tin xác thực cookie (user là ai), chúng ta truyền tham số credentials: include
fetch(url, {
credentials: 'include'
})Nếu muốn gửi credentials khi request URL là cùng nhà*, truyền giá trị same-origin
fetch(url, {
crendentials: 'same-origin'
})Không cho trình duyệt gửi thông tin xác thực, dùng omit
fetch(url, {
crendentials: 'omit'
})Upload file
Sử dụng cùng <input type='file' />, FormData()
var formData = new FormData();
var fileField = document.querySelector("input[type='file']");
formData.append('username', 'abc123');
formData.append('avatar', fileField.files[0]);
fetch('https://example.com/profile/avatar', {
method: 'PUT',
body: formData
})
.then(response => response.json())
.then(response => console.log('Success:', JSON.stringify(response)));
.catch(error => console.error('Error:', error))Upload nhiều file
var formData = new FormData();
var photos = document.querySelector("input[type='file'][multiple]");
formData.append('title', 'My Vegas Vacation');
formData.append('photos', photos.files);
fetch('https://example.com/posts', {
method: 'POST',
body: formData
})
.then(response => response.json())
.then(response => console.log('Success:', JSON.stringify(response)))
.catch(error => console.error('Error:', error));Ví dụ tham khảo, chi tiết hơn về header, body, response object
Initializing...