第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定

重學(xué)JS(十二)—— Ajax和fetch,你選哪個(gè)

標(biāo)簽:
JavaScript

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));

webp


这个设计对读取大型文件的时候十分有用。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


點(diǎn)擊查看更多內(nèi)容
TA 點(diǎn)贊

若覺(jué)得本文不錯(cuò),就分享一下吧!

評(píng)論

作者其他優(yōu)質(zhì)文章

正在加載中
  • 推薦
  • 評(píng)論
  • 收藏
  • 共同學(xué)習(xí),寫(xiě)下你的評(píng)論
感謝您的支持,我會(huì)繼續(xù)努力的~
掃碼打賞,你說(shuō)多少就多少
贊賞金額會(huì)直接到老師賬戶(hù)
支付方式
打開(kāi)微信掃一掃,即可進(jìn)行掃碼打賞哦
今天注冊(cè)有機(jī)會(huì)得

100積分直接送

付費(fèi)專(zhuān)欄免費(fèi)學(xué)

大額優(yōu)惠券免費(fèi)領(lǐng)

立即參與 放棄機(jī)會(huì)
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢(xún)優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)

舉報(bào)

0/150
提交
取消