1、關于fetch的了解
1、現(xiàn)代版瀏覽器自帶的fetch，是存在兼容性的，不支持IE678等低版本瀏覽器的，如果用fetch在低版本瀏覽器中請求數(shù)據(jù)是不起作用的。
2、準確的來說fetch就是 promise + XMLHttpRequest 方式的結合。
3、 需要注意的是fetch并不是ajax的進一步封裝，他是原生的js。
4、fetch(url)會返回一個Promise對象，所以要定義一個容器來存儲。
下面是相關代碼解釋
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>現(xiàn)代版瀏覽器自帶的fetch實現(xiàn)向后端請求數(shù)據(jù)</title>
</head>
<body>
<p class="inp">
<input type="button" value="點我發(fā)送請求" id="clickMe">
</p>
<p class="container">
</p>
</body>
<script src="https://cdn.jsdelivr.net/gh/jquery/jquery@3.4.1/dist/jquery.js"></script>
</html>
下面是js部分
$("#clickMe").click(function(){
//首先定義好一個請求數(shù)據(jù)的有效地址
//在這里為了方便模擬，直接去JSONPlaceholder官網中隨機找了個api接口，嘻嘻
//JSONPlaceholder 是支持跨域請求的
var url = 'http://jsonplaceholder.typicode.com/albums';
//使用瀏覽器自帶的fetch，其中fetch是原生的：? fetch() { [native code] }
// 但是fetch(url)會返回一個Promise對象，所以要定義一個容器來存儲
var responseData = fetch(url);
//Promise是一個抽象的異步處理對象，當這個Promise生成后可以用then()
// 方法來讀取成功狀態(tài)與失敗返回狀態(tài)的回調函數(shù)
responseData.then((response)=>{
//成功時返回的數(shù)據(jù)會存放在response.body流中,所以也需要一個定義容器來接收
var responseData2 = response.json();
console.log(responseData2);//返回的是一個Promise對象
//同時打印出來的還是一個Promise，還要進行一次處理
responseData2.then((response)=>{
console.log(response);//響應的數(shù)據(jù)
//渲染數(shù)據(jù)
renderData(response);
});
},(error)=>{
return error;
});
});
function renderData(data){
var _html = ``;
data.forEach(ele => {
_html += `
<div>
<p>id:${ele.id}</p>
<p>Title:${ele.title}</p>
</div>
`
});
$(".container").html(_html);
}
