Làm thế nào để bạn nhận được phản hồi trong html?

Hôm qua, chúng ta đã xem xét cách sử dụng Fetch API với vanilla JS. Bài viết tập trung vào việc gọi API và làm việc với dữ liệu JSON

Hôm nay, tôi muốn chỉ cho bạn cách sử dụng fetch() để lấy HTML thay thế

Fetch API trả về một luồng

Tóm lại, phản hồi mà chúng tôi nhận được từ fetch() là một ReadableStream

Với một yêu cầu API điển hình, chúng tôi sử dụng phương thức

fetch('/about').then(function (response) {
	// The API call was successful!
	return response.text();
}).then(function (html) {
	// This is the HTML from our response as a text string
	console.log(html);
}).catch(function (err) {
	// There was an error
	console.warn('Something went wrong.', err);
});

fetch('https://jsonplaceholder.typicode.com/posts').then(function (response) {
	// The API call was successful!
	return response.json();
}).then(function (data) {
	// This is the JSON from our response
	console.log(data);
}).catch(function (err) {
	// There was an error
	console.warn('Something went wrong.', err);
});

Nhưng nếu chúng ta muốn tìm nạp HTML thì sao?

Phương thức Tìm nạp fetch('/about').then(function (response) { // The API call was successful! return response.text(); }).then(function (html) { // This is the HTML from our response as a text string console.log(html); }).catch(function (err) { // There was an error console.warn('Something went wrong.', err); }); 1

Ví dụ: điều gì sẽ xảy ra nếu tôi muốn lấy trang

fetch('/about').then(function (response) {
	// The API call was successful!
	return response.text();
}).then(function (html) {
	// This is the HTML from our response as a text string
	console.log(html);
}).catch(function (err) {
	// There was an error
	console.warn('Something went wrong.', err);
});

Mẹo nhỏ là sử dụng phương pháp

fetch('/about').then(function (response) {
	// The API call was successful!
	return response.text();
}).then(function (html) {
	// This is the HTML from our response as a text string
	console.log(html);
}).catch(function (err) {
	// There was an error
	console.warn('Something went wrong.', err);
});

fetch('/about').then(function (response) {
	// The API call was successful!
	return response.text();
}).then(function (html) {
	// This is the HTML from our response as a text string
	console.log(html);
}).catch(function (err) {
	// There was an error
	console.warn('Something went wrong.', err);
});

fetch('/about').then(function (response) {
	// The API call was successful!
	return response.text();
}).then(function (html) {
	// This is the HTML from our response as a text string
	console.log(html);
}).catch(function (err) {
	// There was an error
	console.warn('Something went wrong.', err);
});

Ghi chú. điều này sẽ chỉ hoạt động nếu chạy tại https. //gomakethings. com. Bạn sẽ gặp lỗi CORS nếu cố chạy nó ở bất kỳ nơi nào khác

Lấy HTML từ chuỗi văn bản

Bây giờ chúng ta có HTML dưới dạng chuỗi văn bản, chúng ta có thể thực hiện một số điều khác nhau với nó

1. Đưa nó trực tiếp vào một phần tử với

   fetch('/about').then(function (response) {
   	// The API call was successful!
   	return response.text();
   }).then(function (html) {
   	// This is the HTML from our response as a text string
   	console.log(html);
   }).catch(function (err) {
   	// There was an error
   	console.warn('Something went wrong.', err);
   });
   

   2
2. Chuyển đổi nó sang HTML và thao tác nó

Vì tôi muốn lấy hình ảnh hồ sơ của mình từ trang, hãy chọn tùy chọn 2

Để đơn giản, tôi sẽ sử dụng DOMParser. Nhưng bạn nên đọc toàn bộ bài viết này trên DOMParser để tìm hiểu về hỗ trợ trình duyệt và phương pháp dự phòng

fetch('/about').then(function (response) {
	// The API call was successful!
	return response.text();
}).then(function (html) {

	// Convert the HTML string into a document object
	var parser = new DOMParser();
	var doc = parser.parseFromString(html, 'text/html');

}).catch(function (err) {
	// There was an error
	console.warn('Something went wrong.', err);
});

Khi chuỗi HTML của chúng tôi được chuyển đổi thành một đối tượng tài liệu, chúng tôi có thể sử dụng các phương thức DOM và API trên đó. Cụ thể, chúng ta có thể sử dụng

fetch('/about').then(function (response) {
	// The API call was successful!
	return response.text();
}).then(function (html) {
	// This is the HTML from our response as a text string
	console.log(html);
}).catch(function (err) {
	// There was an error
	console.warn('Something went wrong.', err);
});

fetch('/about').then(function (response) {
	// The API call was successful!
	return response.text();
}).then(function (html) {
	// This is the HTML from our response as a text string
	console.log(html);
}).catch(function (err) {
	// There was an error
	console.warn('Something went wrong.', err);
});

fetch('/about').then(function (response) {
	// The API call was successful!
	return response.text();
}).then(function (html) {

	// Convert the HTML string into a document object
	var parser = new DOMParser();
	var doc = parser.parseFromString(html, 'text/html');

	// Get the image file
	var img = doc.querySelector('img');
	console.log(img);

}).catch(function (err) {
	// There was an error
	console.warn('Something went wrong.', err);
});

Và với điều đó, chúng tôi đã nhận được thành công HTML bằng API Tìm nạp, chuyển đổi nó thành các nút DOM và thao tác với nó

Phản hồi trong HTML là gì?

Làm cách nào để nhận phản hồi API trong HTML?

Làm cách nào để tìm nạp dữ liệu từ tệp HTML?

Phản hồi HTTP có chứa HTML không?