ES6的出现带来了Promise语法，实现了js的callback的变化；XHR是ajax请求的基础，以往的异步请求用到了大量的ajax譬如jq等，Promise的基础上封装的Fetch API更加优雅 已经大量用于客服端和服务器端，譬如 Axios，本文主要讲述Fetch API 与 Ajax的不同点和基础应用，和Axios API
XHR 与 Fetch 发送请求
使用XHR发送请求：
var xhr = new XMLHttpRequest();
xhr.open('GET', url);
xhr.responseType = 'json';
xhr.onload = function() {
console.log(xhr.response);
};
xhr.onerror = function() {
console.log("Oops, error");
};
xhr.send();
- 创建XML
- 发送请求
- 通过回调获取响应信息
使用 Fecth API 发送请求如下：
fetch(url).then(
response => response.json()
).then(
data => console.log(data)
).catch(
e => console.log("Oops, error", e)
)
这种是链式写法，第一个获取请求成功信息，第二个获取请求失败信息，第三个捕获异常
Fetch 与 XHR 不同
- Fetch接收到错误状态码『404, 500 ...』时候, 返回的Promise状态为 resolve『完成状态』，只有在网络故障或者请求被阻止『跨域』才是reject『拒绝状态』。而XHR 会直接返回为error
- Fetch需要设置credentials才能从服务端发送或接收任何 cookies
Fetch API 基本应用
fetch 接受两个参数，一个是URL，另一个「可选」是请求体「method，body，headers...」
- 发送GET请求：
fetch('https://example.com')
- 发送 POST请求：
var url = 'https://example.com/profile';
var data = {username: 'example'};
fetch(url, {
method: 'POST', // or 'PUT'
body: JSON.stringify(data), // data can be `string` or {object}!
headers: new Headers({
'Content-Type': 'application/json'
})
其他参照MDN文档
基于Promise封装的js库「axios API」
用法是Fetch与JQ的大集合
- GET请求
axios.get('https://example.com')
- URL带参请求：
axios.get('/user?ID=12345')
// 用 params 封装
axios.get('/user', {
params: {
ID: 12345
}
})
- POST请求：
axios.post('/user', {
firstName: 'Fred',
lastName: 'Flintstone'
})
- 传递配置创建请求：
axios({
method: 'post',
url: '/user/12345',
data: {
firstName: 'Fred',
lastName: 'Flintstone'
}
});
- 同时内置了其他方法
axios.request(config)
axios.get(url[, config])
axios.delete(url[, config])
axios.head(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])
