Fetch安装
npm install whatwg-fetch --save
npm install es6-promise --save
书籍:
入门: 图解http
精通: 图解http权威指南
get请求示例:
var result = fetch('/api/1', {
credentials: 'include',
headers: {
'Accept': 'application/json, text/plain, */*'
}
});
fetch
是引用了插件之后即可用的方法,使用非常简单。方法的第一个参数是 url 第二个参数是配置信息。
credentials: 'include'
表示跨域请求是可以带cookie(fetch 跨域请求时默认不会带 cookie,需要时得手动指定 credentials: 'include'
。这和 XHR 的 withCredentials 一样),headers可以设置 http 请求的头部信息。
数据Mock
前后端分离的情况下。一般使用三种方式解决数据:
- 模拟静态数据:即按照既定的数据格式,自己提供一些静态的JSON数据,用相关工具(如fis3)做接口来获取这些数据。该形式使用不比较简单的、只用 get 方法的场景,该项目不适用。
- 模拟动态接口:即自己用一个 web 框架,按照既定的接口和数据结构的要求,自己模拟后端接口的功能,让前端项目能顺利跑起来。该方式适用于新开发的项目,后端和前端同时开发,适用于该教程的项目
- 转发线上接口:项目开发中,所有的接口直接用代理获取线上的数据,post 的数据也都直接提交到线上。该方式适用于成熟项目中,而该项目是新开发的,没有线上接口,不适用。