fetch 从初识到应用

Amio 发布于2019-08-20 18:11 / 1750人阅读

摘要：是基于进行实现的对应兼容包兼容服务的兼容中的这个不用解释了吧转换为，要和对象中的保持一致，调用对应的返回一个对象以上代码的解释该值代表中是否携带到服务器端默认值，不携带到服务器允许从当前域下携带到服务器端，相对应服务器端的

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,更加明了
}

GPU云服务器云服务器从域名到网站 spark从入门到前端从入门到精通云计算从入门到精通

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/84180.html

初识fetch

摘要：后面可以跟对象，表示等待才会继续下去执行，如果被或抛出异常则会被外面的捕获。没有获取状态方法，标准没有提供获取当前状态或者的方法。只允许外部传入成功或失败后的回调。这种进度通知的功能还没有用过，暂不知道如何替代。始终不是很懂fetch的作用，然后查了很多资料，看了一篇不错的文章，结合自己之前学习的Promise，然后做一篇文章，稍微记录一下。传统 Ajax 已死，Fetch 永生虽...

rickchen 2019-08-20 14:49 评论0 收藏0
初识React(9)：dva简介

摘要：初始值，优先级低于传给的，如下此时，在后为以格式定义。用于处理同步操作，唯一可以修改的地方。由触发，可以触发，可以和服务器交互，可以获取全局的数据等等。取消注册，清理和。如果没有返回函数，使用会给予警告注册路由表。前言 dva 首先是一个基于 redux 和 redux-saga 的数据流方案，然后为了简化开发体验，dva 还额外内置了 react-router 和 fetch，所以...

keke 2019-08-23 14:08 评论0 收藏0
基于 Generator 和 Iterator 的惰性列表

摘要：在某些不定长度的列表操作上，惰性列表会让代码和结构更灵活。方法本身是立即执行的，如果满足条件，这里的方法会执行两次。结语和是带给我们的非常强大的语言层面的能力，它本身的求值可以看作是惰性的。初识 Lazy List 如果有了解过 Haskell 的朋友，对下面的这些表达一定不陌生 repeat 1 -- => [1, 1, 1, 1, 1,...] cycle abc -- => a...

superw 2019-08-23 12:09 评论0 收藏0
用高阶函数实现地址的延迟搜索

摘要：原文高阶函数在中高阶函数实际上就是控制函数的函数，有别于普通函数传递变量，高阶函数传递的是函数，并且输出函数这对于初学者来说足够烧脑，也足够惊艳。初识时常常会被被震撼了，原来函数还可以这么用这是设计模式与开发实践的单例模式的一个高阶函数。原文高阶函数在javascript中高阶函数实际上就是控制函数的函数，有别于普通函数传递变量，高阶函数传递的是函数，并且输出函数这对于js初学...

Nosee 2019-08-21 11:34 评论0 收藏0
fetch:不一样的xhr请求

摘要：无论请求成功与否，它都返回一个对象，对应请求的。可选一个配置项对象，包括所有对请求的设置。注意或方法的请求不能包含信息。只读请求所关联的对象。使用一个对象来读取流中的数据，并将状态改为已使用。 fetch初识此功能某些浏览器尚在开发中，请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订，所以在未来版本的浏览器中该功能的语法和行为可能随之改...

cheng10 2019-08-20 18:25 评论0 收藏0