vue项目中使用fetch的实现方法

当在Vue的项目中需要发起HTTP请求时，使用fetch是一个不错的选择。Fetch是一种在浏览器中获取和提交资源的新API，取代了旧版的Ajax请求方法，简单易用，且内置在现代浏览器中。

使用fetch需要注意浏览器兼容性问题，因此需要使用polyfill或者引入第三方库如axios来保证兼容性。以下是fetch的实现方法及示例：

在Vue项目中使用fetch

1. 安装whatwg-fetch或者使用fetch-jsonp等fetch的polyfill库

npm install whatwg-fetch --save

在main.js中引入fetch库：

import 'whatwg-fetch'

1. 在Vue组件中使用fetch

fetch('https://api.github.com/users/wuyahy/wuyahy/repos', {
method: 'GET',
headers: {
'Content-Type': 'application/json'
}
})
.then(response => response.json())
.then(data => {
console.log('data', data)
})
.catch(error => console.error('error', error))

这里是一个使用Vue组件中fetch的示例。fetch请求地址为Github API中获取该用户的Repositories列表，请求方式为GET，请求头部为JSON。

另一个示例 - 使用fetch发送POST请求

fetch('http://myendpoint.com/api', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    name: 'John Doe'
  })
})
.then(response => response.json())
.then(data => {
  console.log(data)
})
.catch(error => console.error(error))

这里是一个使用fetch发送POST请求的示例。请求地址为http://myendpoint.com/api，请求方式为POST，请求头部为JSON，请求体中包含了一个名为name的数据项。

在使用fetch时，需要注意以下几点：

1. Fetch会默认带上cookies，不需要手动开启credentials
2. Fetch的timeout是没有默认值并且在某些浏览器中不被支持
3. 对于非2xx状态码，Promise会被标记为rejected状态。因此，需要使用then()方法来进行检查。