当前位置: 首页 > news >正文

fetch 从初识到应用

fetch是基于promise进行实现的
对应npm兼容包:

          node-fetch      //兼容node服务的fetch
          iso-whatwg-fetch    //兼容safari中的fetch

eg:

    fetchData(){
        fetch(url, {
            method: 'post',    //这个不用解释了吧
            body: JSON.stringify(data),   //转换为json,要和header对象中的ContentType保持一致
            headers: {
                'Content-Type': 'application/json'   
            },
            credentials: 'include' ,  
            mode: 'cors'
    
        }).then((response) => response.json())
    }

调用对应的fecthData返回一个promise对象
eg:

    fetchData().then((data) => {
          you can do everything on data
     })

以上代码的解释:
credentials: 'include'|‘omit’ | 'same-origin'

   //该值代表request中是否携带cookie到服务器端
   //omit : 默认值,不携带cookie到服务器
   //same-origin:  允许从当前域下携带cookie到服务器端,相对应服务器端的this.set('Access-Control-Allow-Credentials', true)
   //include:  允许携带all-sites下的cookie到服务器端,服务器端要设置相应的Allow-Credentials
mode: 'no-cors' | 'cors'
   //该值代表当前请求是否可以跨域
   //no-cors: 默认值, fetch默认是不跨域的
   //cors: 可以发送跨域请求,相对应服务器端的 this.set('Access-Control-Allow-Origin', this.get('Origin') || '*');

fetch包含的常用对象:

new Request() 
new Response()
new Headers()

这三个对象可以具体应用到fetch中:
将上面的例子可以改写;

fetchData() {
    let header = new Headers({
        'Content-Type': 'application/json'  
        })
    let request = new request({
        method: 'post',    //这个不用解释了吧
        body: JSON.stringify(data),   //转换为json,要和header对象中的ContentType保持一致
        headers: header,   //声明的header对象
        credentials: 'include' ,  
        mode: 'cors'
    })
    fetch(url, request).then((response) => response.json())   //less code,更加明了
}

相关文章:

  • oreo自适应图标
  • 容器服务--如何在阿里云容器服务上运行基于TensorFlow的Alexnet
  • centos6.x完全禁用IPv6的方法
  • 细说地方门户网站运营的六大经验
  • 列表常用方法
  • 点击按钮,删除数组-对象中的数据
  • 【Spark】RDD操作具体解释4——Action算子
  • DevOps、敏捷开发、云计算,三剑客的小时代
  • 相对和绝对路径及命令cd、mkdir、rmdir、rm
  • 命令+mybatis-generator插件自己主动生成Mapper映射文件
  • Shell笔记4——if条件语句的知识和实践
  • JavaWeb页面添加隐藏版权信息
  • jQuery中的:input选择器
  • 雷军用小米8在微博上公然开车,这成像效果你满意吗
  • laravel blog edit
  • python3.6+scrapy+mysql 爬虫实战
  • [deviceone开发]-do_Webview的基本示例
  • 【跃迁之路】【699天】程序员高效学习方法论探索系列(实验阶段456-2019.1.19)...
  • 【跃迁之路】【735天】程序员高效学习方法论探索系列(实验阶段492-2019.2.25)...
  • C# 免费离线人脸识别 2.0 Demo
  • iOS 颜色设置看我就够了
  • Java反射-动态类加载和重新加载
  • mysql中InnoDB引擎中页的概念
  • Phpstorm怎样批量删除空行?
  • Rancher-k8s加速安装文档
  • Wamp集成环境 添加PHP的新版本
  • 阿里研究院入选中国企业智库系统影响力榜
  • 百度贴吧爬虫node+vue baidu_tieba_crawler
  • 从 Android Sample ApiDemos 中学习 android.animation API 的用法
  • 读懂package.json -- 依赖管理
  • 多线程 start 和 run 方法到底有什么区别?
  • 前端技术周刊 2018-12-10:前端自动化测试
  • 前端设计模式
  • 自制字幕遮挡器
  • kubernetes资源对象--ingress
  • ​创新驱动,边缘计算领袖:亚马逊云科技海外服务器服务再进化
  • # MySQL server 层和存储引擎层是怎么交互数据的?
  • # 深度解析 Socket 与 WebSocket:原理、区别与应用
  • #pragma 指令
  • (10)STL算法之搜索(二) 二分查找
  • (个人笔记质量不佳)SQL 左连接、右连接、内连接的区别
  • (免费领源码)python#django#mysql校园校园宿舍管理系统84831-计算机毕业设计项目选题推荐
  • (转)iOS字体
  • (转)JAVA中的堆栈
  • (转)setTimeout 和 setInterval 的区别
  • (转载)跟我一起学习VIM - The Life Changing Editor
  • .htaccess配置常用技巧
  • .net core 6 redis操作类
  • .NET Core 中的路径问题
  • .net 设置默认首页
  • .net 微服务 服务保护 自动重试 Polly
  • .NET 中让 Task 支持带超时的异步等待
  • .net和jar包windows服务部署
  • .NET中的Exception处理(C#)
  • /proc/stat文件详解(翻译)