Progressive Web Apps(PWA)核心技术-Fe

简单来说Fetch API就是一个请求资源的接口，比XMLHttpRequest更简单。
Fetch支持跨源资源共享（CORS），正式环境需要HTTPS。

请求示例：

fetch('examples/example.json')
.then(function(response) {
  if (!response.ok) {

    throw Error(response.statusText);
  }
  // Read the response as json.
  return response.json();//这里可以响应json、text、blob等
})
.then(function(responseAsJson) { 
  // Do stuff with the JSON
  console.log(responseAsJson);
})
.catch(function(error) {
  console.log('Looks like there was a problem: \n', error);
});

自定义请求

1、设置请求方法

fetch('examples/words.txt', {
  method: 'HEAD'
})

2、POST请求

//基本方式
fetch('someurl/comment', {
  method: 'POST',
  body: 'title=hello&message=world'
})

// form表单方式
fetch('someurl/comment', {
  method: 'POST',
  body: new FormData(document.getElementById('myForm')
})

3、定义header

var myHeaders = new Headers({
  'Content-Type': 'text/plain',
  'X-Custom-Header': 'hello world'
});

fetch('/someurl', {
  headers: myHeaders
});

4、跨域请求
通常跨越解决方案：
jsonp、服务端设置Access-Control-Allow-Origin:*、添加mode:'no-cors'

  // 添加mode
fetch('http://bar.com/data.json', {
  mode: 'no-cors' // 'cors' by default
}) 
.then(function(response) {
  // Do something with response
});

参考链接：
https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API