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]])复制代码