从ajax到fetch

2018-11-15 本文已影响0人守护银河的河童

ajax 的起源

Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术
Ajax 不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的Web应用程序的技术。
使用 JavaScript 向服务器提出请求并处理响应而不阻塞用户！核心对象XMLHTTPRequest。通过这个对象，您的 JavaScript 可在不重载页面的情况与 Web 服务器交换数据，即在不需要刷新页面的情况下，就可以产生局部刷新的效果。

伴随我们操作真实DOM日子里，jquery 的ajax怕是我们使用最多的了。所以接下来我们来重温一下我们的 $.ajax()

ajax 的使用

$.ajax({
   type: 'POST',
   url: url,
   data: data,
   dataType: dataType,
   success: function () {},
   error: function () {}
});

ajax 详细使用属性及方法，这里贴一个地址，详细介绍可参考：http://www.w3school.com.cn/jquery/ajax_ajax.asp

接下来迎来了我们辉煌的es6时代，应运而生了很多，比如vue,比如react,比如被强烈推荐的axios

axios的起源

image.png

这里要挂一个浏览器支持情况，事实上，axios是对ajax的封装，并抛出的promise对象，还没看过源码，不知道这样说对不对，等看过后回来填坑。
所以可知为什么axios不支持ie10以下

ie10不支持promise对象

ie8、9采用的是不是XMLHTTPRequest对象，而是XDomainRequest对象，
axios本质是对XMLHTTPRequest进行的封装，所以当然支持不了啦。

官方可知的几大特性：

node.js 创建 http 请求(也就是它可以在服务器上处理转发，不怕跨域啦)
// `auth` 表示 HTTP 基础验证应当用于连接代理，并提供凭据
// 这将会设置一个 `Proxy-Authorization` 头，覆写掉已有的通过使用 >`header` 设置的自定义 `Proxy-Authorization` 头。
proxy: {
host: '127.0.0.1',
port: 9000,
auth: : {
 username: 'mikeymike',
  password: 'rapunz3l'
 }
},
还是那句话，本作者还未踩过坑，等踩过再来填

客户端支持防止CSRF
这个还是蛮有意思的哈，其实就是cookie携带key,所以关于浏览器，js本质的东西支撑我们走到现在。

axios的使用

EXAMPLE

get请求

// 为给定 ID 的 user 创建请求
axios.get('/user?ID=12345')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

// 可选地，上面的请求可以这样做
axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

post请求

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

多个并发请求

function getUserAccount() {
  return axios.get('/user/12345');
}

function getUserPermissions() {
  return axios.get('/user/12345/permissions');
}

axios.all([getUserAccount(), getUserPermissions()])
  .then(axios.spread(function (acct, perms) {
    // 两个请求现在都执行完成
  }));

是不是很熟悉，这个语法简直和jquery的ajax一个模子嘛，所以建议如果兼容要求不高的同学完全放心食用。贴个官方地址：https://www.kancloud.cn/yunye/axios/234845

fetch的起源

fetch是下一个ajax技术，采用promise方式处理数据
是一种简洁明了的API，比XMLHttpRequest更加简单易用。
挂一张浏览器支持率

image.png

这里要开骂了，这咋办嘛，手机端应该没毛病，pc端怕是要被开除哦。不要怕，同学们，我们的轮子大神们，什么都想好了好哇。whatwg-fetch支持到IE10，其他浏览器也支持。不支持ie9及下，是因为XMLHTTPRequest对象，与axios问题类似。

fetch是直接挂载在BOM上的，所以迟早会都支持，入驻W3C是迟早的事情，同学们大胆用。挂一个学习地址吧：https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API

为什么使用 Fetch API？

十多年来，XMLHttpRequest 对象一直被 AJAX 操作所接受，但是我们知道，XMLHttpRequest 对象的 API 设计并不是很好，输入、输出、状态都在同一个接口管理，容易写出非常混乱的代码。那么Fetch API就应势而生，提供了一种新规范，用来取代善不完美的 XMLHttpRequest 对象。

Fetch API 主要有两个特点：一是接口合理化，AJAX 是将所有不同性质的接口都放在 XHR 对象上，而Fetch是将它们分散在几个不同的对象上，设计更合理；二是Fetch操作返回 Promise 对象，避免了嵌套的回调函数。

html部分
<img class="my-image" src="https://wikipedia.org/static/images/project-logos/frwiki-1.5x.png">
--------------------------------------------------------------
js部分
--------------------------------------------------------------
var myImage = document.querySelector('.my-image');
fetch('https://upload.wikimedia.org/wikipedia/commons/7/77/Delete_key1.jpg')
    .then(res => res.blob())
    .then(res => {
        var objectURL = URL.createObjectURL(res);
        myImage.src = objectURL;
});

fetch请求后通过第一个then()返回一个promise对象:

Body.arrayBuffer()
采取一个Response流，并将其读入完成。它返回一个promise对象，使用一个ArrayBuffer reslove。
Body.blob()
采取一个Response流，并将其读入完成。它返回一个promise对象，使用一个Blob reslove。
Body.formData()
采取一个Response流，并将其读入完成。它返回一个promise对象，使用一个FormData对象reslove。
Body.json()
采取一个Response流，并将其读入完成。它返回一个promise对象，使用JSON对象reslove。
Body.text()
采取一个Response流，并将其读入完成。它返回一个用USVString（文本）来解决的promise reslove。响应总是使用UTF-8进行解码。

就是说，fetch的第一个then()内 return 以上不同的promise对象，promise有2个参数，一个reslove,一个reject, 这里挂一个promised的学习地址：https://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/0014345008539155e93fc16046d4bb7854943814c4f9dc2000
fetch请求后通过第二个then()接收上一个then()返回的promise对象

EXPLAME

get请求

// 通过fetch获取百度的错误提示页面
fetch('https://www.baidu.com/search/error.html') // 返回一个Promise对象
  .then((res)=>{
    return res.text() // res.text()是一个Promise对象
  })
  .then((res)=>{
    console.log(res) // res是最终的结果
  })

post请求

// 通过fetch获取百度的错误提示页面
fetch('https://www.baidu.com/search/error.html', {
    method: 'POST' // 指定是POST请求
  })
  .then((res)=>{
    return res.text()
  })
  .then((res)=>{
    console.log(res)
  })

有参数的post请求

// 通过fetch获取百度的错误提示页面
fetch('https://www.baidu.com/search/error.html', {
    method: 'POST',
    body: new URLSearchParams([["foo", 1],["bar", 2]]).toString() // 这里是请求对象,也可以JSON.srtingfy([["foo", 1],["bar", 2]]),看后端需要的格式
  })
  .then((res)=>{
    return res.text()
  })
  .then((res)=>{
    console.log(res)
  })

fetch基本使用

fetch(url, {
    headers: {'Cache-Control': 'no-cache'},//请求头
    method:  'POST',//请求方法
    mode: 'no-cors',//模式是否为跨域,值：cors、no-cors,no-cors不会发送跨域请求
    body: JSON.stringify({})//请求参数
}).then(function() { /* handle response */ });

今天就到这里了，接下来去啃一下axios源码，再来填坑.

欢迎指正，强烈欢迎