当前位置: 首页 > 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
  • 【翻译】babel对TC39装饰器草案的实现
  • 【前端学习】-粗谈选择器
  • Android框架之Volley
  • css的样式优先级
  • HTTP请求重发
  • in typeof instanceof ===这些运算符有什么作用
  • JS进阶 - JS 、JS-Web-API与DOM、BOM
  • leetcode98. Validate Binary Search Tree
  • leetcode讲解--894. All Possible Full Binary Trees
  • mysql常用命令汇总
  • MySQL用户中的%到底包不包括localhost?
  • nodejs调试方法
  • PHP那些事儿
  • Python socket服务器端、客户端传送信息
  • Python爬虫--- 1.3 BS4库的解析器
  • python学习笔记-类对象的信息
  • SpringBoot 实战 (三) | 配置文件详解
  • Synchronized 关键字使用、底层原理、JDK1.6 之后的底层优化以及 和ReenTrantLock 的对比...
  • 闭包--闭包作用之保存(一)
  • 构造函数(constructor)与原型链(prototype)关系
  • 机器学习学习笔记一
  • 基于Dubbo+ZooKeeper的分布式服务的实现
  • 简单数学运算程序(不定期更新)
  • 使用Gradle第一次构建Java程序
  • 线性表及其算法(java实现)
  • ​ 无限可能性的探索:Amazon Lightsail轻量应用服务器引领数字化时代创新发展
  • #图像处理
  • (20)目标检测算法之YOLOv5计算预选框、详解anchor计算
  • (Matalb回归预测)PSO-BP粒子群算法优化BP神经网络的多维回归预测
  • (二)七种元启发算法(DBO、LO、SWO、COA、LSO、KOA、GRO)求解无人机路径规划MATLAB
  • (附源码)python旅游推荐系统 毕业设计 250623
  • (四)【Jmeter】 JMeter的界面布局与组件概述
  • (四)图像的%2线性拉伸
  • (幽默漫画)有个程序员老公,是怎样的体验?
  • (正则)提取页面里的img标签
  • (转)iOS字体
  • .gitattributes 文件
  • .net framwork4.6操作MySQL报错Character set ‘utf8mb3‘ is not supported 解决方法
  • .net 无限分类
  • .NET/C# 使用 ConditionalWeakTable 附加字段(CLR 版本的附加属性,也可用用来当作弱引用字典 WeakDictionary)