alt text
传统的Request
var request = new XMLHttpRequest();
request.open('GET', '/my/url', true);
request.onreadystatechange = function() {
if (this.readyState === 4) {
if (this.status >= 200 && this.status < 400) {
// Success!
var resp = this.responseText;
} else {
// Error :(
}
}
};
request.send();
request = null;
jQuery ajax
$.ajax({
type: 'GET',
url: '/my/url',
success: function(resp) {
},
error: function() {
}
});
传统的XMLHttpRequest请求闲的非常的杂乱，而优雅的ajax又不得不额外加载jQuery这个80K左右的框架
但是现在，我们可以使用Fetch，提供了对 Request 和 Response （以及其他与网络请求有关的）对象的通用定义，它还提供了一种定义，将 CORS 和 HTTP 原生的头信息结合起来，取代了原来那种分离的定义。
But，Fetch 兼容性，可以看到，兼容性很差，移动端全军覆没，不过可以使用Fetch polyfill
alt text
使用方法
fetch(url) // Call the fetch function passing the url of the API as a parameter
.then(function() {
// Your code for handling the data you get from the API
})
.catch(function() {
// This is where you run code if the server returns any errors
});
so easy
现在使用Fetch创建一个简单的Get请求，将从Random User API获取的数据展示在网页上
<h1>Authors</h1>
<ul id="authors"></ul>
const ul=document.getElementById('authors');
const url="https://randomuser.me/api/?results=10";
fetch(url)
.then(function(data){
})
.catch(function(err){
});
首先获取authors，定义常量URL，然后调用Fetch API并且使用上面定义的常量URL
，但是此处获取的并不是JSON，而是需要进行转换，这些方法包括：
- clone()
- redirect()
- arrayBuffer()
- formData()
- blob()
- text()
- json()
此处我们需要返回的是json对象，所以上面的js应该：
fetch(url)
.then((resp) => resp.json()) //转换成json对象
.then(function(data) {
dom操作
})
})
接下来定义两个函数：
function createNode(el){
return document.createElement(el);
}
function append(parent,el){
retrun parent.appendChild(el);
}
编写请求成功后操作
fetch(url)
.then((resp)=>resp.json())
.then(function(data){
let authors=data.results;
return authors.map(function(author){
let li=createNode('li'),
img=createNode('img'),
span=createNode('span');
img.src=author.picture.medium;
span.innerHTML=`${author.name.first} ${author.name.last}`;
append(li,img);
append(li,span);
append(ul,li);
})
})
.catch(function(err){
console.log(err)
})
处理更多请求(POST)
Fetch默认是GET方式，此外还可以使用自定义头部与请求方式，如：
const url = 'https://randomuser.me/api';
// The data we are going to send in our request
let data = {
name: 'Sara'
}
// The parameters we are gonna pass to the fetch function
let fetchData = {
method: 'POST',
body: data,
headers: new Headers()
}
fetch(url, fetchData)
.then(function() {
// Handle response you get from the server
});
还可以使用request构建请求对象，如：
const url = 'https://randomuser.me/api';
// The data we are going to send in our request
let data = {
name: 'Sara'
}
// Create our request constructor with all the parameters we need
var request = new Request(url, {
method: 'POST',
body: data,
headers: new Headers()
});
fetch(request)
.then(function() {
// Handle response we get from the API
})
