美文网首页
Fetch请求与数据Mock

Fetch请求与数据Mock

作者: 黄昏少年 | 来源:发表于2018-03-21 21:37 被阅读0次

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代理

相关文章

网友评论

      本文标题:Fetch请求与数据Mock

      本文链接:https://www.haomeiwen.com/subject/xznwqftx.html