html自带的fetch 异步请求 api

最简单的fetchAPI调用如下：

fetch('https://api.github.com/users/chriscoyier/repos')
  .then(response => response.json())
  .then(data => {
    // data就是我们请求的数据
    console.log(data)
  });

fetch兼容性问题：可以用下面两行代码解决兼容性

{% codeblock lang:js%}
fetch("xxxxx")
.then(function(response){
// do something...
})
{% endcodeblock %}

fetch发送数据：

fetch(url,options);

第二个参数为一个对象：

{
  method: 'post',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(content)
}

请求如果失败了，fetch还会继续执行.then（）代码块，所以我们需要catch一下错误，

fetch('some-url')
  .then(response => {
    if (response.ok) {
      return response.json()
    } else {
      // Find some way to get to execute .catch()
    }
  });


else需要把错误抛出或者返回一个reject的promise对象；
else {
  throw new Error('something went wrong!')
}

// rejecting a Promise
else {
  return Promise.reject('something went wrong!')
}



综上：
fetch('some-url')
  .then(response => {
    if (response.ok) {
      return response.json()
    } else {
      return Promise.reject('something went wrong!')
    }
  })
  .then(data => console.log('data is', data))
  .catch(error => console.log('error is', error));


还有报错要返回状态信息：所以可以这么改下：
fetch('some-url')
  .then(response => {
    if (response.ok) {
      return response.json()
    } else {
      return Promise.reject({
        status: response.status,
        statusText: response.statusText
      })
    }
  })
  .catch(error => {
    if (error.status === 404) {
      // do something about 404
    }
  })