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.
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,
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ốnví 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: includefetch('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', 'inputUploading 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
Anh em nào ước ao đọc kỹ hơn thế thì link đây: https://gist.github.com/justsml/529d0b1ddc5249095ff4b890aad5e801
