fetch&前端路由原理

1.fetch

参考连接：http://javascript.ruanyifeng.com/bom/ajax.html#toc27

Ajax操作所用的XMLHttpRequest对象，已经有十多年的历史，它的API设计并不是很好，输入、输出、状态都在同一个接口管理，容易写出非常混乱的代码。Fetch API是一种新规范，用来取代XMLHttpRequest对象。它主要有两个特点，一是接口合理化，Ajax是将所有不同性质的接口都放在XHR对象上，而Fetch是将它们分散在几个不同的对象上，设计更合理；二是Fetch操作返回Promise对象，避免了嵌套的回调函数。

eg：

fetch('./api/some.json').then(function (response) { if (response.ok) { response.json().then(function (data) { console.log(data); }); } else { console.log('请求失败，状态码为', response.status); } }, function(err) { console.log('出错：', err); });

其中fetch的第一个参数为url，第二个参数可以拓展ajax的属性，如

mode

headers

method

body

等

也可以传入Request对象：

eg：

var req = new Request(URL, {method: 'GET', cache: 'reload'}); fetch(req).then(function(response) { return response.json(); }).then(function(json) { someOperator(json); });

fetch方法返回Response对象实例，它有以下属性。

• status：整数值，表示状态码（比如200）
• statusText：字符串，表示状态信息，默认是“OK”
• ok：布尔值，表示状态码是否在200-299的范围内
• headers：Headers对象，表示HTTP回应的头信息
• url：字符串，表示HTTP请求的网址
• type：字符串，合法的值有五个basic、cors、default、error、opaque。basic表示正常的同域请求；cors表示CORS机制的跨域请求；error表示网络出错，无法取得信息，status属性为0，headers属性为空，并且导致fetch函数返回Promise对象被拒绝；opaque表示非CORS机制的跨域请求，受到严格限制。

Request对象和Response对象都提供以下方法，用来读取body／response。

• arrayBuffer()
• blob()
• json()
• text()
• formData()

2.前端路由原理

1.history API

history.pushState 和 history.replaceState

这两个 API 都接收三个参数，分别是

• 状态对象（state object） — 一个JavaScript对象，与用pushState()方法创建的新历史记录条目关联。无论何时用户导航到新创建的状态，popstate事件都会被触发，并且事件对象的state属性都包含历史记录条目的状态对象的拷贝。

• 标题（title） — FireFox浏览器目前会忽略该参数，虽然以后可能会用上。考虑到未来可能会对该方法进行修改，传一个空字符串会比较安全。或者，你也可以传入一个简短的标题，标明将要进入的状态。

• 地址（URL） — 新的历史记录条目的地址。浏览器不会在调用pushState()方法后加载该地址，但之后，可能会试图加载，例如用户重启浏览器。新的URL不一定是绝对路径；如果是相对路径，它将以当前URL为基准；传入的URL与当前URL应该是同源的，否则，pushState()会抛出异常。该参数是可选的；不指定的话则为文档当前URL。

相同之处是两个 API 都会操作浏览器的历史记录，而不会引起页面的刷新。

不同之处在于，pushState会增加一条新的历史记录，而replaceState则会替换当前的历史记录。

eg:

window.history.pushState(null, null, "https://www.baidu.com/?name=orange");

2.hash

window.location.hash = ''

监听onhashchange事件