fetch_fetchmany - CSDN
fetch 订阅
《Fetch》是一款Android平台的应用。 展开全文
《Fetch》是一款Android平台的应用。
信息
软件大小
3.33M
软件名称
Fetch
软件平台
Android
软件语言
英文
Fetch应用介绍
Fetch帮助你找到你想要的Android应用,Fetch会对每一个应用加入多个关键词,让找应用更加准确,还会推荐与当前应用类似的软件,使用需要配合谷歌官方电子市场。 [1] 
收起全文
  • ES6-fetch的用法

    千次阅读 2018-05-15 09:14:50
    目前项目中对Promise的兼容性尚存在问题,如果在项目中应用fetch,需要引入es6-promise和fetch。 当我们谈及Ajax技术的时候,通常意思就是基于XMLHttpRequest的Ajax,它是一种能够有效改进页面通信的技术。 ...

    事实标准,并不存在与ES6规范中,基于Promise实现。
    目前项目中对Promise的兼容性尚存在问题,如果在项目中应用fetch,需要引入es6-promise和fetch。

    当我们谈及Ajax技术的时候,通常意思就是基于XMLHttpRequest的Ajax,它是一种能够有效改进页面通信的技术。
    XMLHttpRequest的最新替代技术——Fetch API, 它是W3C的正式标准

    Fetch API

    Fetch API提供了一个fetch()方法,它被定义在BOM的window对象中,你可以用它来发起对远程资源的请求。 该方法返回的是一个Promise对象,让你能够对请求的返回结果进行检索。
    - 通过fetch的形式获取数据
    - JSONP、CORS、服务器跨域
    - CORS请求头

    Access-Control-Allow-Origin", "*" //所有的网站
    Access-Control-Allow-Headers", "Content-Type,Content-Length, Authorization, Accept,X-Requested-With"
    Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS" //Restful请求规范 支持符合Restful的所有协议

    fetch只支持跨域CORS 不支持JSONP跨越

    <script>
        //fetch发送数据
        //支持CORS跨域,没有办法接受jsonp数据
        function getData() {
            //支持 cors跨域url地址'http://api.yytianqi.com/air?city=CH010100&key=2c5br4sgmguremgg'
            //https://api.douban.com/v2/book/1220562?callback=func
           return fetch('http://localhost:3001/getdata')
                .then(function (response) {
                    console.log(response);
                    //promise对象返回
                    return response.json();
                })
        }
        getData().then(function (data) {
            console.log(data);
        })
    </script>

    fetch-jsonp跨域是可以支持jsonp跨域

    • npm install fetch-jsonp

      “`javascript

    //fetch所支持的jsonp发送数据请求 function getFetchJSONP(){ // return fetchJsonp('https://api.douban.com/v2/book/1220562',{ return fetchJsonp('http://localhost:3001/getjsonp',{ //告诉fetchjsonp使用jsonp跨域 jsonpCallback: 'callback' }) .then(function (response) { //拿到整个响应数据 //返回响应中的主要数据 return response.json(); }) } getFetchJSONP().then(function (data) { console.log(data); })

    “`

    JSONP、CORS、服务器跨域 3种跨域方案

    跨域方案很多,除了这三种,还有active控件 iframe
    跨域不安全,不推荐跨域

    var express =require('express');
    var app=new express();
    var request=require('request');
    
    //1 CORS跨域
    app.use(function (req,res,next) {
       //每一次发送的请求头
        //支持cors跨域
        res.header('Access-Control-Allow-Origin','*');
        next();
    });
    app.get('/getdata',function (req,res) {
        res.send('{"text":"CORS跨域"}');
    });
    //2 jsonp跨域
    app.get('/getjsonp',function (req,res) {
        console.log(req.query.callback);
        console.log(req.querystring);
       res.send(`;${req.query.callback}({"text":"CORS跨域"});`);
    });
    //3 服务器转发跨域
    app.get('/request',function (req,res) {
       var url='https://api.douban.com/v2/book/1220562'
        request(url,function (error,response,body) {
            console.log(body);
            if(!error){
    
                res.send(body);
            }
        })
    });
    app.listen('3001',function(){
        console.log('端口3001被打开了');
    });
    展开全文
  • fetch()方法介绍

    2018-05-04 20:58:49
    告别XMLHttpRequest与XMLHttpRequest(XHR)类似,fetch()方法允许你发出AJAX请求。区别在于Fetch API使用Promise,因此是一种简洁明了的API,比XMLHttpRequest更加简单易用。从Chrome 40开始,Fetch API可以被利用在...

    告别XMLHttpRequest

    与XMLHttpRequest(XHR)类似,fetch()方法允许你发出AJAX请求。区别在于Fetch API使用Promise,因此是一种简洁明了的API,比XMLHttpRequest更加简单易用。

    从Chrome 40开始,Fetch API可以被利用在Service Worker全局作用范围中,自Chrome 42开始,可以被利用在页面中。

    如果你还不了解Promise,需要首先补充这方面知识。

    基本的Fetch请求

    让我们首先来比较一个XMLHttpRequest使用示例与fetch方法的使用示例。该示例向服务器端发出请求,得到响应并使用JSON将其解析。

    XMLHttpRequest

    一个XMLHttpRequest需要设置两个事件回调函数,一个用于获取数据成功时调用,另一个用于获取数据失败时调用,以及一个open()方法调用及一个send()方法调用。

    function reqListener(){
        var data=JSON.parse(this.responseText);
        console.log(data);
    }
    function reqError(err){
        console.log("Fetch错误:"+err);
    }
    var oReq=new XMLHttpRequest();
    oReq.οnlοad=reqListener;
    oReq.οnerrοr=reqError;
    oReq.open("get","/students.json",true);
    oReq.send();

    Fetch

    一个fetch()方法的使用代码示例如下所示:

    fetch("/students.json")
    .then(
        function(response){
            if(response.status!==200){
                console.log("存在一个问题,状态码为:"+response.status);
                return;
            }
            //检查响应文本
            response.json().then(function(data){
                console.log(data);
            });
        }
    )
    .catch(function(err){
        console.log("Fetch错误:"+err);
    });

    在上面这个示例中,我们在使用JSON解析响应前首先检查响应状态码是否为200。

    一个fetch()请求的响应为一个Stream对象,这表示当我们调用json()方法,将返回一个Promise对象,因为流的读取将为一个异步过程。

    响应元数据

    在上一个示例中我们检查了Response对象的状态码,同时展示了如何使用JSON解析响应数据。我们可能想要访问响应头等元数据,代码如下所示:

    fetch("/students.json")
    .then(
        function(response){
            console.log(response.headers.get('Content-Type'));
            console.log(response.headers.get('Date'));
            console.log(response.status);
            console.log(response.statusText);
            console.log(response.type);
            console.log(response.url);
        }
    )

    响应类型

    当我们发出一个fetch请求时,响应类型将会为以下几种之一:“basic”、“cors”或“opaque”。这些类型标识资源来源,提示你应该怎样对待响应流。

    当请求的资源在相同域中时,响应类型为“basic”,不严格限定你如何处理这些资源。

    如果请求的资源在其他域中,将返回一个CORS响应头。响应类型为“cors”。“cors”响应限定了你只能在响应头中看见“Cache-Control”、“Content-Language”、“Content-Type”、“Expires”、“Last-Modified”以及“Progma”。

    一个“opaque”响应针对的是访问的资源位于不同域中,但没有返回CORS响应头的场合。如果响应类型为“opaque”,我们将不能查看数据,也不能查看响应状态,也就是说我们不能检查请求成功与否。目前为止不能在页面脚本中请求其他域中的资源。

    你可以为fetch请求定义一个模式以确保请求有效。可以定义的模式如下所示:

    • "same-origin":只在请求同域中资源时成功,其他请求将被拒绝。
    • "cors":允许请求同域及返回CORS响应头的域中的资源。
    • "cors-with-forced-preflight":在发出实际请求前执行preflight检查。
    • "no-cors"针对的是向其他不返回CORS响应头的域中的资源发出的请求(响应类型为“opaque”),但如前所述,目前在页面脚本代码中不起作用。

    为了定义模式,在fetch方法的第二个参数中添加选项对象并在该对象中定义模式:

    fetch("http://www.html5online.com.cn/cors-enabled/students.json",{mode:"cors"})
    .then(
        function(response){
            console.log(response.headers.get('Content-Type'));
            console.log(response.headers.get('Date'));
            console.log(response.status);
            console.log(response.statusText);
            console.log(response.type);
            console.log(response.url);
        }
    )
    .catch(function(err){
        console.log("Fetch错误:"+err);
    });

    Promise方法链

    Promise API的一个重大特性是可以链接方法。对于fetch来说,这允许你共享fetch请求逻辑。

    如果使用JSON API,你需要检查状态并且使用JSON对每个响应进行解析。你可以通过在不同的返回Promise对象的函数中定义状态及使用JSON进行解析来简化代码,你将只需要关注于处理数据及错误:

    function status(response){
        if(response.status>=200 && response.status<300){
            return Promise.resolve(response);
        }
        else{
            return Promise.reject(new Error(response.statusText));
        }
    }
    function json(response){
        return response.json();
    }
    fetch("/students.json")
    .then(status)
    .then(json)
    .then(function(data){
        console.log("请求成功,JSON解析后的响应数据为:",data);
    })
    .catch(function(err){
        console.log("Fetch错误:"+err);
    });

    在上述代码中,我们定义了status函数,该函数检查响应的状态码并返回Promise.resolve()方法或Promise.reject()方法的返回结果(分别为具有肯定结果的Promise及具有否定结果的Promise)。这是fetch()方法链中的第一个方法。如果返回肯定结果,我们调用json()函数,该函数返回来自于response.json()方法的Promise对象。在此之后我们得到了一个被解析过的JSON对象,如果解析失败Promise将返回否定结果,导致catch段代码被执行。

    这样书写的好处在于你可以共享fetch请求的逻辑,代码容易阅读、维护及测试。

    POST请求

    在Web应用程序中经常需要使用POST方法提交页面中的一些数据。

    为了执行POST提交,我们可以将method属性值设置为post,并且在body属性值中设置需要提交的数据。

    fetch(url,{
        method:"post",
        headers:{
            "Content-type":"application:/x-www-form-urlencoded:charset=UTF-8"
        },
        body:"name=lulingniu&age=40"
    })
    .then(status)
    .then(json)
    .then(function(data){
        console.log("请求成功,JSON解析后的响应数据为:",data);
    })
    .catch(function(err){
        console.log("Fetch错误:"+err);
    });

    使用Fetch请求发送凭证

    你可能想要使用Fetch发送带有诸如cookie之类的凭证的请求。你可以在选项对象中将credentials属性值设置为“include”:

    fetch(url,{
    credentials:"include"
    })
    展开全文
  • fetch详解

    千次阅读 2017-08-17 11:10:17
    在 JS 中使用 fetch 更加高效地进行网络请求 在前端快速发展地过程中,为了契合更好的设计模式,产生了 fetch 框架,此文将简要介绍下 fetch 的基本使用。 我的源博客地址:...

    在 JS 中使用 fetch 更加高效地进行网络请求

    在前端快速发展地过程中,为了契合更好的设计模式,产生了 fetch 框架,此文将简要介绍下 fetch 的基本使用。
    我的源博客地址:http://blog.parryqiu.com/2016/03/02/using_fetch_in_nodejs/
    免费的高质量软件开发视频教程 https://devopen.club/
    软件开发每日头条文章 https://techfoco.com/

    在 AJAX 时代,进行 API 等网络请求都是通过 XMLHttpRequest 或者封装后的框架进行网络请求。
    现在产生的 fetch 框架简直就是为了提供更加强大、高效的网络请求而生,虽然在目前会有一点浏览器兼容的问题,但是当我们进行 Hybrid App 开发的时候,如我之前介绍的 Ionic 和 React Native,都可以使用 fetch 进行完美的网络请求。

    1. fetch 初体验

    在 Chrome 浏览器中已经全局支持了 fetch 函数,打开调试工具,在 Console 中可以进行初体验。
    先不考虑跨域请求的使用方法,我们先请求同域的资源,如在我的博客页面中,打开 Console 进行如下请求。
    我的源博客地址:http://blog.parryqiu.com/2016/03/02/using_fetch_in_nodejs/
    此测试操作需要在我博客中打开控制台测试,因为会有跨域的问题。

    {% codeblock lang:js%}
    fetch("http://blog.parryqiu.com").then(function(response){console.log(response)})
    {% endcodeblock %}

    返回的数据:

    截图

    这样就很快速地完成了一次网络请求,我们发现返回的数据也比之前的 XMLHttpRequest 返回的数据丰富、易用的多。

    2. 关于 fetch 标准概览

    虽然 fetch 还不是作为一个稳定的标准发布,但是在其一直迭代更新的 标准描述 中,我们发现已经包含了很多的好东西。
    fetch 支持了大部分常用的 HTTP 的请求以及和 HTTP 标准的兼容,如 HTTP Method,HTTP Headers,Request,Response。

    3. fetch 的使用

    3.1 兼容浏览器的处理

    可以通过下面的语句处理浏览器兼容的问题。

    {% codeblock lang:js%}
    if(self.fetch) {
    // 使用 fetch 框架处理
    } else {
    // 使用 XMLHttpRequest 或者其他封装框架处理
    }
    {% endcodeblock %}

    3.2 一般构造请求的方法

    使用 fetch 的构造函数请求数据后,返回一个 Promise 对象,处理即可。
    {% codeblock lang:js%}
    fetch("http://blog.parryqiu.com")
    .then(function(response){
    // do something...
    })
    {% endcodeblock %}

    3.3 fetch 构成函数的其他选项

    我们可以将与 HTTP Headers 兼容的格式加入到请求的头中,如每次 API 的请求我们想不受缓存的影响,那么可以像下面这样请求:

    {% codeblock lang:js%}
    fetch("http://blog.parryqiu.com", {
    headers: {
    'Cache-Control': 'no-cache'
    }
    })
    .then(function(response){
    // do something...
    })
    {% endcodeblock %}

    具体的可选参数可以查看 这里
    如我们还可以这样使用,添加了更多的头部参数:
    {% codeblock lang:js%}
    var myHeaders = new Headers();
    myHeaders.append("Content-Type", "text/plain");
    myHeaders.append("Content-Length", content.length.toString());
    myHeaders.append("X-Custom-Header", "ProcessThisImmediately");

    var myInit = {
    method: 'GET',
    headers: myHeaders,
    mode: 'cors',
    cache: 'default'
    };

    fetch("http://blog.parryqiu.com", myInit)
    .then(function(response){
    // do something...
    })
    {% endcodeblock %}

    3.4 返回的数据结构

    在请求后的 Response 中,具体的定义在 这里
    常用的有:

    • Response.status 也就是 StatusCode,如成功就是 200
    • Response.statusText 是 StatusCode 的描述文本,如成功就是 OK
    • Response.ok 一个 Boolean 类型的值,判断是否正常返回,也就是 StatusCode 为 200-299

    做如下请求:
    {% codeblock lang:js%}
    fetch("http://blog.parryqiu.com")
    .then(function(response){
    console.log(response.status);
    console.log(response.statusText);
    console.log(response.ok);
    })
    {% endcodeblock %}

    返回的数据:

    截图

    3.5 Body 参数

    因为在 Request 和 Response 中都包含 Body 的实现,所以包含以下类型:

    • ArrayBuffer
    • ArrayBufferView (Uint8Array and friends)
    • Blob/File
    • string
    • URLSearchParams
    • FormData

    在 fetch 中实现了对应的方法,并返回的都是 Promise 类型。

    这样处理返回的数据类型就会变的特别地方便,如处理 json 格式的数据:
    {% codeblock lang:js%}
    var myRequest = new Request('http://api.com/products.json');

    fetch(myRequest).then(function(response) {
    return response.json().then(function(json) {
    for(i = 0; i < json.products.length; i++) {
    var name = json.products[i].Name;
    var price = json.products[i].Price;
    // do something more...
    }
    });
    });
    {% endcodeblock %}

    4. 浏览器兼容

    目前项目给出的浏览器支持如下图,如果需要兼容低版本浏览器,那么可以通过上面介绍的浏览器兼容处理办法解决此问题,不过相信很快就不需要考虑兼容问题了,在 Hybrid App 开发中使用基本没有问题,因为基本都是基于 Node.js 进行开发的。
    有朋友提出兼容性问题的严谨性,其实通过 JS polyfill,已经可以获得很好的支持。

    截图

    • 如使用 fetch-ie8 可以获得如下支持。

    截图



    由于 Fetch API 是基于 Promise 设计,有必要先学习一下 Promise,推荐阅读 MDN Promise 教程。旧浏览器不支持 Promise,需要使用 polyfill es6-promise

    本文不是 Fetch API 科普贴,其实是讲异步处理和 Promise 的。Fetch API 很简单,看文档很快就学会了。推荐 MDN Fetch 教程 和 万能的WHATWG Fetch 规范

    Why Fetch

    XMLHttpRequest 是一个设计粗糙的 API,不符合关注分离(Separation of Concerns)的原则,配置和调用方式非常混乱,而且基于事件的异步模型写起来也没有现代的 Promise,generator/yield,async/await 友好。

    Fetch 的出现就是为了解决 XHR 的问题,拿例子说明:

    使用 XHR 发送一个 json 请求一般是这样:

    var xhr = new XMLHttpRequest();
    xhr.open('GET', url);
    xhr.responseType = 'json';
    
    xhr.onload = function() {
      console.log(xhr.response);
    };
    
    xhr.onerror = function() {
      console.log("Oops, error");
    };
    
    xhr.send();

    使用 Fetch 后,顿时看起来好一点

    fetch(url).then(function(response) {
      return response.json();
    }).then(function(data) {
      console.log(data);
    }).catch(function(e) {
      console.log("Oops, error");
    });

    使用 ES6 的 箭头函数 后:

    fetch(url).then(response => response.json())
      .then(data => console.log(data))
      .catch(e => console.log("Oops, error", e))

    现在看起来好很多了,但这种 Promise 的写法还是有 Callback 的影子,而且 promise 使用 catch 方法来进行错误处理的方式有点奇怪。不用急,下面使用 async/await 来做最终优化:

    注:async/await 是非常新的 API,属于 ES7,目前尚在 Stage 1(提议) 阶段,这是它的完整规范。使用 Babel 开启 runtime 模式后可以把 async/await 无痛编译成 ES5 代码。也可以直接使用 regenerator 来编译到 ES5。

    try {
      let response = await fetch(url);
      let data = response.json();
      console.log(data);
    } catch(e) {
      console.log("Oops, error", e);
    }
    // 注:这段代码如果想运行,外面需要包一个 async function

    duang~~ 的一声,使用 await 后,写异步代码就像写同步代码一样爽await 后面可以跟 Promise 对象,表示等待 Promise resolve() 才会继续向下执行,如果 Promise 被 reject() 或抛出异常则会被外面的 try...catch 捕获。

    await/async,generator/yield 可以粗略地认为是 Promise 的语法糖(其实功能上也有增强)。因此它们可以和 Fetch 完美搭配使用。这也是使用标准 Promise 一大好处。最近也把项目中使用第三方 Promise 库的代码全部转成标准 Promise,为以后全面使用 async/await 做准备。

    另外,Fetch 也很适合做现在流行的同构应用,有人基于 Fetch 的语法,在 Node 端基于 http 库实现了 node-fetch,又有人封装了用于同构应用的 isomorphic-fetch

    注:同构(isomorphic/universal)就是使前后端运行同一套代码的意思,后端一般是指 NodeJS 环境。

    总结一下,Fetch 优点主要有:

    1. 语法简洁,更加语义化
    2. 基于标准 Promise 实现,支持 async/await
    3. 同构方便,使用 isomorphic-fetch

    Fetch 启用方法

    下面是重点↓↓↓

    先看一下 Fetch 原生支持率:


    浏览器对 Fetch 支持率

    原生支持率并不高,幸运的是,引入下面这些 polyfill 后可以完美支持 IE8+ :

    1. 由于 IE8 是 ES3,需要引入 ES5 的 polyfill: es5-shim, es5-sham
    2. 引入 Promise 的 polyfill: es6-promise
    3. 引入 fetch 探测库:fetch-detector
    4. 引入 fetch 的 polyfill: fetch-ie8
    5. 可选:如果你还使用了 jsonp,引入 fetch-jsonp
    6. 可选:开启 Babel 的 runtime 模式,现在就使用 async/await

    Fetch polyfill 的基本原理是探测是否存在 window.fetch 方法,如果没有则用 XHR 实现。这也是 github/fetch 的做法,但是有些浏览器(Chrome 45)原生支持 Fetch,但响应中有中文时会乱码,老外又不太关心这种问题,所以我自己才封装了 fetch-detectorfetch-ie8 只在浏览器稳定支持 Fetch 情况下才使用原生 Fetch。这些库现在每天有几千万个请求都在使用,绝对靠谱

    终于,引用了这一堆 polyfill 后,可以愉快地使用 Fetch 了。但要小心,下面有坑:

    Fetch 常见坑

    • Fetch 请求默认是不带 cookie 的,需要设置 fetch(url, {credentials: 'include'})
    • 服务器返回 400,500 错误码时并不会 reject,只有网络错误这些导致请求不能完成时,fetch 才会被 reject。

    竟然没有提到 IE,这实在太不科学了,现在来详细说下 IE

    IE 使用策略

    所有版本的 IE 均不支持原生 Fetch,fetch-ie8 会自动使用 XHR 做 polyfill。但在跨域时有个问题需要处理。

    IE8, 9 的 XHR 不支持 CORS 跨域,虽然提供 XDomainRequest,但这个东西就是玩具,不支持传 Cookie!如果接口需要权限验证,还是乖乖地使用 jsonp 吧,推荐使用 fetch-jsonp。如果有问题直接提 issue,我会第一时间解决。

    标准 Promise 的不足

    由于 Fetch 是典型的异步场景,所以大部分遇到的问题不是 Fetch 的,其实是 Promise 的。ES6 的 Promise 是基于 Promises/A+ 标准,为了保持简单简洁,只提供极简的几个 API。如果你用过一些牛 X 的异步库,如 jQuery(不要笑) 、Q.js 或者 RSVP.js,可能会感觉 Promise 功能太少了。

    没有 Deferred

    Deferred 可以在创建 Promise 时可以减少一层嵌套,还有就是跨方法使用时很方便。
    ECMAScript 11 年就有过 Deferred 提案,但后来没被接受。其实用 Promise 不到十行代码就能实现 Deferred:es6-deferred。现在有了 async/await,generator/yield 后,deferred 就没有使用价值了。

    没有获取状态方法:isRejected,isResolved

    标准 Promise 没有提供获取当前状态 rejected 或者 resolved 的方法。只允许外部传入成功或失败后的回调。我认为这其实是优点,这是一种声明式的接口,更简单。

    缺少其它一些方法:always,progress,finally

    always 可以通过在 then 和 catch 里重复调用方法实现。finally 也类似。progress 这种进度通知的功能还没有用过,暂不知道如何替代。

    最后

    Fetch 替换 XHR 只是时间问题,现在看到国外很多新的库都默认使用了 Fetch。

    最后再做一个大胆预测:由于 async/await 这类新异步语法的出现,第三方的 Promise 类库会逐渐被标准 Promise 替代,使用 polyfill 是现在比较明智的做法。



    作者:Cam
    链接:http://www.jianshu.com/p/THLARe
    來源:简书
    著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

    展开全文
  • Fetch使用方法

    千次阅读 2019-06-11 19:26:33
     fetch是用来取代传统的XMLHttpRequest的。它的优点很多,包括链式调用的语法、返回promise等。 什么是fetch?  fetch api是基于promise的设计,它是为了取代传统xhr的不合理的写法而生的。 WHY fetch?  ...

    前言:

      fetch是用来取代传统的XMLHttpRequest的。 它的优点很多,包括链式调用的语法、返回promise等。

     

    什么是fetch?

      fetch api是基于promise的设计,它是为了取代传统xhr的不合理的写法而生的。

     

    WHY fetch?

      xhr请求写起来非常的混乱,如下所示:

    复制代码

    var xhr = new XMLHttpRequest();
    xhr.open('GET', url);
    xhr.responseType = 'json';
    
    xhr.onload = function() {
      console.log(xhr.response);
    };
    
    xhr.onerror = function() {
      console.log("Oops, error");
    };
    
    xhr.send();

    复制代码

      

      但是使用fetch之后,如下所示:

    复制代码

    fetch(url).then(function(response) {
      return response.json();
    }).then(function(data) {
      console.log(data);
    }).catch(function(e) {
      console.log("Oops, error");
    });

    复制代码

      这种链式调用的风格看上去会非常舒服。

     

      如果我们再使用了箭头函数就会更加简洁了。 

    fetch(url).then(response => response.json())
      .then(data => console.log(data))
      .catch(e => console.log("Oops, error", e))

      

      通过使用fetch api,可以将传统的xhr的粗糙的使用方法转化的如此精简,实在是好! 

     

      但是呢? 使用Promise,还是可以很明显看到callback的使用,不急,我们还可以使用 async、await :

    复制代码

    // Async/Await requirements: Latest Chrome/FF browser or Babel: https://babeljs.io/docs/plugins/transform-async-to-generator/
    // Fetch requirements: Latest Chrome/FF browser or Github fetch polyfill: https://github.com/github/fetch
    
    // async function
    async function fetchAsync () {
      // await response of fetch call
      let response = await fetch('https://api.github.com');
      // only proceed once promise is resolved
      let data = await response.json();
      // only proceed once second promise is resolved
      return data;
    }
    
    // trigger async function
    // log response or catch error of fetch promise
    fetchAsync()
        .then(data => console.log(data))
        .catch(reason => console.log(reason.message))

    复制代码

      这样看上去是不是就好多了呢?

    注意: 对于async和await的使用还是很明确的,就是一般我们在一个异步函数之前添加 await 关键词,然后在这个 await 的相关代码外面使用的时 async 函数,这样的结合才是合适的。

    利用 async 和 await,我们就可以像写同步代码一样来写异步代码啦! 

    但是呢,目前async 和 await 的支持性还不是很好,目前还无法在一般的浏览器中使用!

       

     

     

     

     

     

     

     

     

     

      

    基本使用方法:

    fetch必须接受一个资源路径作为参数,并且返回了一个promise,所以我们可以直接使用链式调用的方式。 

    复制代码

     fetch("/getAllProduct").then(function(res) {
                return res.json();
            }).then(function (data) {
                if (data.code == 200) {
                  console.log('获取到所有产品' ,data.data);
                  that.props.addAllProduct(data.data);
                } else {
                  console.log(data.message);
                }
            })

    复制代码

    这样,我们就可以发送一个ajax请求。

    复制代码

    /* 对客户端的返回数据封装
     * @param [code] (number) code为返回的状态码
     * @param [message] (string) message为返回的信息
     * @param [data] (any) data是可选的,为返回给前端的数据
     */
    // 注意: retrunJson中的res为node处理接口的回调函数中的res,这个是必须的。
    function returnJson(res, code, message, data) {
        var response = {
            code: code,
            message: message
        };
        if (typeof data !== 'undefined') {
            response.data = data;
        }
        res.json(response);
       // 返回这个请求之后,必须要 res.end()表示请求的结束,否则后台可能会崩溃。
        res.end();
    }
    
    router.post('/register', function (req, res) {
        let userName = req.body.username,
            password = req.body.password,
            passwordAgain = req.body.passwordAgain,
            type = req.body.type;
        console.log(userName, password, type);
        if (type == 1) {
            if (password == passwordAgain) {
                let managerId = uuidv1();
    
                console.log(userName, password, passwordAgain);
    
                var newUser = new Manager({
                    name: userName,
                    password: password,
                    type: req.body.type,
                    managerId: managerId
                });
    
                Manager.find(userName, function (err, user) {
                    if (err) {
                        returnJson(res, 5001, '服务器错误,注册失败');
                    } else {
                        if (user !== null) {
                            returnJson(res, 4003, "此用户已经注册!");
                        } else {
                            // 如果符合条件,就注册该用户,将数据保存在数据库。
                            newUser.save(function (err, user) {
                                if (err) {
                                    // 服务器端错误,失败返回状态码500
                                    returnJson(res, 500, "用户注册失败!");
                                } else {
                                    // user数据较简单,直接传递user即可,如果复杂,我们可以考虑使用对象形式传递更多数据。
                                    returnJson(res, 200, "用户注册成功!", user);
                                }
                            });
                        }
                    }
                });
            } else {
                returnJson(res, 4001, "用户两次输入密码不一致!");
            }
        } else if( type == 2) {
    
             if (password == passwordAgain) {
                let userId = uuidv1();
    
                console.log(userName, password, passwordAgain);
    
                var newUser = new User({
                    name: userName,
                    password: password,
                    type: req.body.type,
                    userId: userId
                });
    
                User.find(userName, function (err, user) {
                    if (err) {
                        returnJson(res, 5001, '服务器错误,注册失败');
                    } else {
                        if (user !== null) {
                            returnJson(res, 4003, "此用户已经注册!");
                        } else {
                            // 如果符合条件,就注册该用户,将数据保存在数据库。
                            newUser.save(function (err, user) {
                                if (err) {
                                    // 服务器端错误,失败返回状态码500
                                    returnJson(res, 500, "用户注册失败!");
                                } else {
                                    // user数据较简单,直接传递user即可,如果复杂,我们可以考虑使用对象形式传递更多数据。
                                    returnJson(res, 200, "用户注册成功!", user);
                                }
                            });
                        }
                    }
                });
            } else {
                returnJson(res, 4001, "用户两次输入密码不一致!");
            }
        }
    });

    复制代码

    这样,我们就可以处理一个ajax请求。

     

     

     

     

    注意点:

    1、fetch() 返回的是一个Promise对象。

      fetch使用的promise对象可以使得我们使用同步的方式写异步函数。

     

    2、 fetch api是可以结合 async 和 await 来使用的。 

      fetch是基于promise实现的,但是使用promise的写法,我们还是可以看到callback的影子,如果结合 async和await来使用,还是非常不错的。

     

    3、 Fetch api 提供的spi囊括但是不限于xhr的所有功能。

     

    4、 fetch api 可以跨域。 

      参考: https://fetch.spec.whatwg.org/#http-cors-protocol

      跨域请求必须包括  Origin 作为header. 

         以上。

        我们在发送fetch请求的时候就会使用到CORS协议,尽管这些对于开发者来说是透明的,但是浏览器还是会发送 origin 字段。 

     

    5、fetch提供了对request和response对象的通用定义。

      Fetch 提供了对 Request 和 Response (以及其他与网络请求有关的)对象的通用定义。所以在一个Fetch请求中,完全可以只使用Request 和 Response两个对象,通过Request 设置参数,通过Response 对返回值进行处理。 

     所以,我们可以将一个fetch定义如下:

    复制代码

    var myHeaders = new Headers();
    myHeaders.append('Content-Type', 'image/jpeg');
    var option = { method: 'GET',
        headers: myHeaders,
        mode: 'cors',
        cache: 'default' };
    var myRequest = new Request('https://api.github.com/users/mzabriskie',option);
    fetch(myRequest).then(function(response) {
        ... 
    });

    复制代码

     所有主要的浏览器(除了Opera Mini和老的IE)都支持Fetch。针对不支持的,可以使用Fetch polyfill  

    https://www.cnblogs.com/zhuzhenwei918/p/7249691.html

    展开全文
  • Fetch()方法介绍

    千次阅读 2019-08-16 15:38:54
    相较于XMLHttpRequest,一种更加简单的Ajax请求方法
  • 使用 Fetch

    2018-11-22 11:54:13
    无论用JavaScript发送或获取信息,我们都会用到Ajax。Ajax不需要刷新页面就能发送和获取信息,能使网页实现异步更新。 几年前,初始化Ajax一般使用jQuery的ajax方法: $.ajax('some-url', { ...
  • fetch,终于认识你

    千次阅读 2018-08-06 16:49:58
    fetch和XMLHttpRequest 如果看网上的fetch教程,会首先对比XMLHttpRequest和fetch的优劣,然后引出一堆看了很快会忘记的内容(本人记性不好)。因此,我写一篇关于fetch的文章,为了自己看着方便,毕竟工作中用到的也...
  • fetch 使用(随笔)

    2018-08-29 10:38:00
    fetch 使用(随笔) 这是我自己使用,封装的fetch使用,包括get/post/文件上传,随手记一下,以防忘记。 /** * fatch * @params:请求参数 * url 请求接口 * obj 请求数据(post) * params 文件(图片上传,...
  • Fetch 使用教程

    万次阅读 2019-06-04 09:36:20
    window 自带了window.fetch方法, 在最新版的 Firefox 和 Chrome 中已经提供支持,其他浏览器还有兼容性问题,要做兼容性处理。 一、fetch 安装 为了解决fetch 的兼容性,我们使用 Fetch Polyfill 的版本 whatwg-...
  • JavaScript fetch 快速入门

    万次阅读 多人点赞 2018-12-14 05:36:14
    JavaScript fetch 快速入门fetch API 简介fetch 的浏览器支持情况使用fetch一个最简单的fetch在浏览器中用fetch获取数据用fetch和POST方法提交表单参考 fetch API 简介 ECMAScript 2015(ES6) 标准的发布已经三年有余...
  • 首先不得不吐槽一下fetch的response机制了,真的太麻烦了,当我快放弃的时候,才真正懂得怎么用 axios使用特别简单 axios("http://xxx/xxx.json?a=123'").then((r)=&gt;{  console.log(r)//这里...
  • 详解git fetch与git pull的区别

    万次阅读 多人点赞 2017-07-13 17:34:30
    git fetch和git pull都可以将远端仓库更新至本地那么他们之间有什么区别呢?想要弄清楚这个问题有有几个概念不得不提。FETCH_HEAD: 是一个版本链接,记录在本地的一个文件中,指向着目前已经从远程仓库取下来的分支...
  • Git fetch和git pull的区别

    万次阅读 多人点赞 2020-05-28 21:08:50
    Git中从远程的分支获取最新的版本到本地有这样2个命令:1.git fetch:相当于是从远程获取最新版本到本地,不会自动merge git fetch origin mastergit log -p master..origin/mastergit merge origin/maste...
  • 详解git pull和git fetch的区别:

    万次阅读 多人点赞 2018-09-29 09:57:48
    在我们使用git的时候用的更新代码是git fetch,git pull这两条指令。但是有没有小伙伴去思考过这两者的区别呢?有经验的人总是说最好用git fetch+git merge,不建议用git pull。也有人说git pull=git fetch+git ...
  • git fetch和git pull之间的区别

    万次阅读 多人点赞 2018-12-05 15:18:37
    git fetch和git pull都可以用来更新本地库,它们之间有什么区别呢? 每一个本地库下都有一个.git的隐藏文件夹,文件夹中的文件保存着跟这个本地库相关的信息 首先来看下其中的config文件 [core] ...
  • 还记得去年这个时候接手学长留下来的微信小程序项目 当时看到学长用的是fetch获取数据 还以为是微信提供的API…???? 一、什么是fetch Fetch API提供了一个JavaScript接口 用于访问和操纵 HTTP 管道的一些具体部分 ...
  • 现在window.fetch基本上每一个浏览器都已经自带(IE除外),以后再也不用引入$.ajax、axios、fetch了就能用了 axios没有这殊荣,原生自带意味着什么,不用说什么了、多么重要能让window当中自带fetch方法,以前听过...
  • git命令之fetch

    2017-10-22 09:38:20
    理解fetch的关键是要理解FETCH_HEAD,FETCH_HEAD是某个branch在服务器上的最新状态,每一个执行过fetch操作的项目都会存在一个FETCH_HEAD列表,这个列表保存在.git/FETCH_HEAD文件中,其中每一行对应于远程服务器的...
  • 终于弄明白git fetch 和 git pull区别

    万次阅读 多人点赞 2019-05-01 11:34:08
    git在本地会保存两个版本的仓库,分为本地仓库和远程仓库。 1、本地仓库就是我们平时 add、commit 的那个仓库。...fetch 只能更新远程仓库的代码为最新的,本地仓库的代码还未被更新,我们需要通过 git merge o...
  • fetch的二次封装

    2020-03-05 21:58:10
    前两天把axios封装整理了一下,今天整理一下fetch的封装。 可能我身边用fetch的太少,我们的...fetch是js本身的一个接口,与axios/ajax有本质的区别,可能随着时间推移,fetch应该会更加流行吧。 有兴趣的朋友可以...
1 2 3 4 5 ... 20
收藏数 345,655
精华内容 138,262
关键字:

fetch