基于Promise规范的fetch API的使用

fetch的使用

  1. 作用:fetch 这个API,是专门用来发起Ajax请求的;

  2. fetch 是由原生 JS 提供的 API ,专门用来取代 XHR 这个对象的;

    fetch('请求的url地址').then(response => res.json()).then(data= > console.log(data))
    // 注意: 第一个.then 中获取到的不是最终的数据,而是一个中间的数据流对象;
    // 注意: 第一个 .then 中获取到的数据,是 一个 Response 类型的对象;
    // 第二个 .then 中,获取到的才是真正的 数据;
  3. 发起 Get 请求:

    // 默认 fetch('url') 的话,发起的是 Get 请求
    fetch('http://39.106.32.91:3000/api/getlunbo')
    .then(response => {
    // 这个 response 就是 服务器返回的可读数据流,内部存储的是二进制数据;
    // .json() 的作用,就是 读取 response 这个二进制数据流,并把 读取到的数据,转为 JSON 格式的 Promise对象
    return response.json()
    })
    .then(data => {
    // 这里,第二个.then 中,拿到的 data,就是最终的数据
    console.log(data)
    })

  4. 发起 Post 请求:

    // 这是 查询参数   name=zs&age=20
    var sendData = new URLSearchParams()
    sendData.append('name', 'ls')
    sendData.append('age', 30) fetch('http://39.106.32.91:3000/api/post', {
    method: 'POST',
    body: sendData // 要发送给服务器的数据
    })
    .then(response => response.json())
    .then(data => console.log(data))
  5. 注意: fetch 无法 发起 JSONP 请求

fetch-jsonp的使用

  1. fetch-jsonp最基本的用法:

    fetchJsonp('https://api.douban.com/v2/movie/in_theaters')
    .then(function (response) {
    // response.json() 当我们为 response 对象调用了它的 .json() 方法以后,返回的是新的 promise 实例对象
    return response.json()
    })
    .then(function (result) {
    console.log(result)
    })
  2. 注意事项:

    1. 在调用 fetchJsonp 的时候,小括号中写的就是 你请求的 API 地址
    2. 当调用 fetchJsonp 以后,得到的是一个 Promise 实例对象,需要为 这个 Promise 实例对象,通过.then指定成功的回调函数,在第一个 .then()中无法拿到最终的数据,拿到的是一个 Response 类型的对象;
    3. 在 第一个 .then中,需要return response.json()从而返回一个新的Promise 实例;
    4. 为 第一个 .then()中返回的promise实例,再次通过.then指定成功回调,拿到的才是最终的数据;

    总结: 第一个.then拿到的是中间数据; 第二个.then中拿到的才是最终的数据;

基于Promise规范的fetch API的使用的更多相关文章

  1. Axios & fetch api & Promise & POST

    Axios & fetch api & Promise & POST https://github.com/axios/axios https://appdividend.co ...

  2. (转)这个API很“迷人”——新的Fetch API

    原文:https://hacks.mozilla.org/2015/03/this-api-is-so-fetching 原标题是This API is So Fetching,Fetching也可以 ...

  3. Fetch API 了解 及对比ajax、axois

    Fetch是什么 Fetch 是一个现代的概念, 等同于 XMLHttpRequest.它提供了许多与XMLHttpRequest相同的功能,但被设计成更具可扩展性和高效性.Fetch被很多浏览器所支 ...

  4. 了解 Fetch API与Fetch+Async/await

    背景 提及前端与服务器端的异步通信,离不开 Ajax (Asynchronous JavaScript and XML).实际上我们常说的 Ajax 并非指某一项具体的技术,它主要是基于用脚本操作 H ...

  5. queue-fun —— nodejs下基于Promise的队列控制模块。

    工作告一段落,闲来无事,写了一个在nodejs实现“半阻塞”的控制程序. 一直以来,nodejs以单线程非阻塞,高并发的特性而闻名.搞这个“半阻塞”是东西,有什么用呢? 场景一: 现在的web应用可有 ...

  6. Ajax新玩法fetch API

    目前 Web 异步应用都是基于 XMLHttpRequest/ActiveXObject (IE)实现的, 这些对象不是专门为资源获取而设计的,因而它们的 API 非常复杂,同时还需要开发者处理兼容性 ...

  7. Axios 是一个基于 promise 的 HTTP 库

    Axios 是一个基于 promise 的 HTTP 库 vue项目中关于axios的简单使用 axios介绍 Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.j ...

  8. Fetch API 接口参考

    前言 Fetch API是新的ajax解决方案,用于解决古老的XHR对象不能实现的问题,Fetch API 提供了一个获取资源的接口(包括跨域请求),任何使用过 XMLHttpRequest 的人都能 ...

  9. Cross-origin resource sharing JSON with Padding 同源策略 JSONP 为什么form表单提交没有跨域问题,但ajax提交有跨域问题? XMLHttpRequest and the Fetch API follow the same-origin policy 预检请求(preflight request)

    https://zh.wikipedia.org/wiki/跨来源资源共享 跨来源资源共享(CORS)是一份浏览器技术的规范,提供了 Web 服务从不同域传来沙盒脚本的方法,以避开浏览器的同源策略[1 ...

随机推荐

  1. 记录一个python公式罗列的方法 join()方法和map()方法的妙用

    题干: 怎样将一个列表中的元素读出,并列出计算式子 比如:[,,,] 输出:+++ = 列表中的元素个数不定 小白和大神的方法: #小白的 numlist=[,,,] sum1='' cal='+' ...

  2. 论文笔记 Pose-driven Deep Convolutional Model for Person Re-identification_tianqi_2017_ICCV

    1. 摘要 为解决姿态变化的问题,作者提出Pose-driven-deep convolutional model(PDC),结合了global feature跟local feature, 而loc ...

  3. STM32中用 stop 模式 配合低功耗模式下的自动唤醒(AWU) 能否实现FreeRTOS tickless 模式

    已经实现  ,2018年11月17日11:56:42,具体 如下: 第一步 : 修改 void vPortSetupTimerInterrupt( void ) 函数 ,修改原来的 systick 定 ...

  4. Linux Shell常用技巧(一)

    一.    特殊文件: /dev/null和/dev/tty Linux系统提供了两个对Shell编程非常有用的特殊文件,/dev/null和/dev/tty.其中/dev/null将会丢掉所有写入它 ...

  5. delphi黑色背景模式

    uses Vcl.Styles, vcl.Themes; procedure TForm1.FormCreate(Sender: TObject); begin TStyleManager.LoadF ...

  6. android6.0系统Healthd分析及低电量自动关机流程

    系统平台:android6.0概述Healthd是android4.4之后提出来的一种中介模型,该模型向下监听来自底层的电池事件,向上传递电池数据信息给Framework层的BatteryServic ...

  7. kettle安装部署及远程执行

    一.windows环境 1.安装jdk 随意选择目录 只需把默认安装目录 \java 之前的目录修改即可 2.安装jre→更改→ \java 之前目录和安装 jdk 目录相同即可 注:若无安装目录要求 ...

  8. 基于 Keras 用深度学习预测时间序列

    目录 基于 Keras 用深度学习预测时间序列 问题描述 多层感知机回归 多层感知机回归结合"窗口法" 改进方向 扩展阅读 本文主要参考了 Jason Brownlee 的博文 T ...

  9. 【转】netty源码分析之LengthFieldBasedFrameDecoder

    原文:https://www.jianshu.com/p/a0a51fd79f62 拆包的原理 关于拆包原理的上一篇博文 netty源码分析之拆包器的奥秘 中已详细阐述,这里简单总结下:netty的拆 ...

  10. Django model字段类型(转)

    AutoField     一个 IntegerField, 添加记录时它会自动增长. 你通常不需要直接使用这个字段; 如果你不指定主键的话,系统会自动添加一个主键字段到你的 model.(参阅 _自 ...