Fetch请求与数据Mock

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 的数据也都直接提交到线上。该方式适用于成熟项目中,而该项目是新开发的,没有线上接口,不适用。

如果有跨域情况可使用webpack-dev-server代理

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,404评论 19 139
  • 昨天看了池莉的《你是一条河》,其中两个细节让自己感动莫名、唏嘘不已—— 一是那个敏感聪明的女儿冬儿自愿到遥远的农村...
    飞常心阅读 10,115评论 1 4
  • 喜欢的情感粘在心头 总是灰色的心情盘旋 空落期待的相遇幻想 落地是虚假的爱情事 期待的人不曾露出笑 没有爱的世界中...
    眉心没有美人痣阅读 1,599评论 0 1
  • 惯看世间容华 只为寻得了那一丝为之动容的情结 惯听秋月春风 只为留得住那一阵静谧无杂的蝉鸣 你走了 而我还在 尘埃...
    汐汐向阳阅读 1,722评论 4 3
  • 本着每周五都要和老张看场电影的原则,利用中午时间看了场《至暗时刻》。因为受时间限制,所以没有做功课,也没有...
    wd_bd4c阅读 3,846评论 0 0