FETCH LÀ GÌ

  -  

Video học tập lập trình mỗi ngày

Fetch api là gì? Trước đây nếu khách hàng nào đã có lần sử dụng XMLHttpRequest để giao tiếp lấy tài liệu từ server đến client hay ngược lại thì cũng trở thành hiểu nôm mãng cầu Fetch api javascript cũng vậy. Fetch api chất nhận được những nhà cải cách và phát triển lấy resource và thực hiện những yêu thương cầu trải qua http.

Bạn đang xem: Fetch là gì

Trước đây cửa hàng chúng tôi có đề cập đến nội dung bài viết request api vào Nodejs "3 cách để thực hiện các yêu mong HTTP (Http request) vào Node.js" nhưng mà không đề cập đến thằng này (Fetch) bởi sao??? Đoán test xem nào?

Fetch api là gì?

Nói đến sang vậy thôi chứ bất kể thằng lập trình nào cơ mà chẳng biết đến nó (XMLHttpRequest) và về sau sử dụng jquery cùng với ajax để sử dụng post, get... Hồi ajax bắt đầu ra, ai mà thực hiện được dụng jquery.ajax cũng chính là pro lắm rồi. Làm cho bao nhiêu câu hỏi như add html, change value nhưng mà không reload lại page, tổ chức các kiểu này nọ. Ghê lắm, giờ đỡ rồi :D. Sau đó 1 thởi gian thì, developers cũng thấy những bất cập khi thực hiện ajax, tuyệt XMLHttpRequest và quay sang trọng ủng hộ native APIs. Và hôm nay, họ cùng bàn luận về một api đó là fetch. Tuy vậy khi nói về fetch thì bọn họ cũng bắt buộc quên rằng có một api cũng rất mạnh và cũng đang rất được những lập trình sẵn viên sử dụng thoáng rộng đó là axios. Nhưng lại để chỉ ra những điểm khác biệt giữa fetch cùng aixos thì chúng ta nên mày mò kỹ, bởi vì mỗi cái áp dụng khác nhau.

Fetch Api Javascript

Phương thức fetch () nhìn chung rất văn minh và linh hoạt, bởi vì vậy họ sẽ xem sang một số công dụng mà fecth rất có thể xử lý được. Cơ mà lưu ý, fetch() hoàn toàn có thể sẽ ko được hỗ trợ với những browser cũ, nhưng nhìn toàn diện thì điều này không đáng bận tâm, bởi hầu hết bọn họ đều áp dụng những browser văn minh hơn.

Xem fetch() tư vấn browser

Cú pháp cơ bản Fetch api

let promise = fetch(url, )* url– the URL khổng lồ access. * options– optional parameters: method, headers etc.

Xem thêm: 9 Phần Mềm Giả Lập Game Nintendo Tốt Nhất, Giả Lập Máy Điện Tử 4 Nút Trên Pc

GET Requests with Fetch API

Ở trường hợp nào đó đó bọn họ muốn nhấn một json tử một API nào đó, trường phù hợp này thì chạm mặt nhiều phần nhiều là mấy thằng làm cho với REST API

fetch('https://api.github.com/orgs/nodejs').then(response => response.json()).then(data => console.log(data) // Prints result from `response.json()` in getRequest).catch(error => console.error(error))

Custom headers

Có thể showroom headers nếu muốn

ví dụ :

fetch('https://api.github.com/orgs/nodejs', { headers: new Headers( 'Content-Type': 'application/json' // 'Content-Type': 'application/x-www-form-urlencoded',).then(response => response.json()).then(data => console.log(data)).catch(error => console.error(error))

Gửi thông tin xác thực với Fetch

Để nhờ cất hộ kèm thông tin xác thực cookie (user là ai), chúng ta truyền tham sốcredentials: include

fetch('https://api.github.com/orgs/nodejs', credentials: 'include', // Useful for including session ID (and, IIRC, authorization headers)).then(response => response.json()).then(data => console.log(data) // Prints result from `response.json()`).catch(error => console.error(error))Notes: Ở phía trên ông lập trình như thế nào khi áp dụng credentials: 'include' bị lỗi này "blocked by CORS" thì sử dụngcredentials: "same-origin"

POST/PUT Requests

postRequest('http://example.com/api/v1/users', user: 'Dan') .then(data => console.log(data)) // Result from the `response.json()` call .catch(error => console.error(error))function postRequest(url, data) return fetch(url, credentials: 'same-origin', // 'include', default: 'omit' method: 'POST', // 'GET', 'PUT', 'DELETE', etc. Body: JSON.stringify(data), // Coordinate the body type with 'Content-Type' headers: new Headers( 'Content-Type': 'application/json' ), ) .then(response => response.json())

Posting an HTML

postForm('http://example.com/api/v1/users') .then(data => console.log(data)) .catch(error => console.error(error))function postForm(url) const formData = new FormData(document.querySelector('form.edit-user')) return fetch(url, method: 'POST', // or 'PUT' body: formData // a FormData will automatically phối the 'Content-Type' ) .then(response => response.json())

Form encoded data

postFormData('http://example.com/api/v1/users', user: 'Mary') .then(data => console.log(data)) .catch(error => console.error(error))function postFormData(url, data) return fetch(url, method: 'POST', // 'GET', 'PUT', 'DELETE', etc. Body: new URLSearchParams(data), headers: new Headers( 'Content-type': 'application/x-www-form-urlencoded; charset=UTF-8' ) ) .then(response => response.json())

Uploading files

postFile('http://example.com/api/v1/users', 'input.avatar') .then(data => console.log(data)) .catch(error => console.error(error))function postFile(url, fileSelector) const formData = new FormData() const fileField = document.querySelector(fileSelector) formData.append('username', 'abc123') formData.append('avatar', fileField.files<0>) return fetch(url, method: 'POST', // 'GET', 'PUT', 'DELETE', etc. Body: formData // Coordinate the body toàn thân type with 'Content-Type' ) .then(response => response.json())

Uploading multiple files

Trên client là như vậy này.

input type="file" multiple="" class="files" name="files"Cách sử dụng.

Xem thêm: Tai Auto Fifa Online 3 M Apk 1, Auto Click Fifa Online 3M Apk 1

postFile('http://example.com/api/v1/users', 'input.files') .then(data => console.log(data)) .catch(error => console.error(error))function postFile(url, fileSelector) const formData = new FormData() const fileFields = document.querySelectorAll(fileSelector) // địa chỉ all files khổng lồ formData Array.prototype.forEach.call(fileFields.files, f => formData.append('files', f)) // Alternatively for PHP peeps, use `files<>` for the name to tư vấn arrays // Array.prototype.forEach.call(fileFields.files, f => formData.append('files<>', f)) return fetch(url, method: 'POST', // 'GET', 'PUT', 'DELETE', etc. Body: formData // Coordinate the body type with 'Content-Type' ) .then(response => response.json())Thật ra nói cho hay vậy chứ thấy axios ngon hơn những há há, Để lần sau post về axios rồi so sánh cho bằng hữu một phát. Giờ thì thử nghiệm thử coi nó giỏi ho nắm nào.

Anh em nào ước ao đọc kỹ hơn thế thì link đây: https://gist.github.com/justsml/529d0b1ddc5249095ff4b890aad5e801