重学JS（十二）—— Ajax和fetch，你选哪个

Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。
Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。

是个前端都会用ajax，因为它原生的写法很鸡肋，所以大多会封装下，导致可能很多人不会自己写个ajax请求。

var xhr= new XMLHttpRequest(); // 新建XMLHttpRequest对象xhr.= function(){ //请求完成
  console.log(this.responseText);
}// 发送请求:xhr.open('GET', '/user');
xhr.send();

这样一个请求就发出去了。很麻烦，发个简单请求，还得写这么多行代码。
实际开发中当然不会这么写，否则代码冗余，可读性差，用promise封装一下

function  send(url){  return new Promise((resolve,reject) => {     var xhr= new XMLHttpRequest(); // 新建XMLHttpRequest对象
     xhr. = function(){ //请求完成
        if(xhr.status === 200 )
         resolve(this.responseText);        else
         reject(this.responseText);
     }     // 发送请求:
     xhr.open('GET', url);
     xhr.send(); 
  })
}

之后就可以send().then()这么用了。不多说，用express生成个简单服务器试试效果。
后端代码：

router.get('/getUser', function(req, res, next) {
  res.send('success');  //这个请求返回成功});

router.get('/getName', function(req, res, next) {
  res.status(404).send('failed');   //这个请求返回失败});

前端代码：

send('/getUser').then(json =>{console.log(json)});  //successsend('/getName').catch(json =>{console.log(json)});  //failed

分别打印出了success和failed。
后面fetch出来了，ajax受到了前所未有的威胁，看看大家是怎么评价fetch的。

语法简洁，更加语义化
基于标准 Promise 实现，支持 async/await

唔~说的好像fetch可以直接上手似的。
先试试它能给我什么结果。

fetch('/getUser').then(response=> response.text()).then(json => console.log(json));   //successfetch('/getName').then(response=> response.text()).then(json => console.log(json));  //failed

可以看到fetch不会因为服务器返回了404，而帮你reject。注意'getName'这个接口是靠then回调来处理的，不是catch。所以直接用fetch不行，也需要额外封装一层。
语法简洁，更加语义化。基于标准 Promise 实现，支持 async/await 以这点来说，fetch对开发库的人员是较友好的，相比ajax。

ReadableStream

fetch 将 response.body 设计成 ReadableStream。所以上面我们取返回内容的时候，是通过text()函数。因为这个设计我们不得不多进行一次转化。看看response.body是什么

fetch('/getUser').then(response=>console.log(response.body));

这个设计对读取大型文件的时候十分有用。flv.js就是用fetch请求视频数据，然后不断读取流中数据，解析，再塞到video标签，让video标签能够持续播放视频。
我们不必等待所有数据全部返回再处理，而是可以一点点地边读数据边处理数据，是不是让人很兴奋。

function fetchUrl(url){
  fetch(url).then(response => {    var reader = response.body.getReader();    let charsReceived = 0; //接收字符
    let num = 0;
    reader.read().then(function processText({ done, value }) {      if (done) {       console.log("Stream complete,received " + charsReceived+" read " + num);       return;
      }
      charsReceived += value.length;
      num++;      return reader.read().then(processText);  //循环读直到全部读完为止
    })  
});
}
fetchUrl('/getUser');//Stream complete,received 7 read 1

success ，是7个字符。读了一次。读一次是因为服务器是一次性的把success吐出来了。
服务器增加条路由

router.get('/getFile', function(req, res, next) {  let stream = fs.createReadStream(__dirname + '/test.txt');//创造可读流
  stream.pipe(res);//将可读流写入response});

再试试

fetchUrl('/getFile');  //Stream complete,received 436084 read 7

很完美。将test.txt文件一小段一小段地发送到客户端，减小了服务器的内存压力,同时也提高了前端的响应速度。

作者：闪闪发光的狼
链接：https://www.jianshu.com/p/d9bff9289018