fetch 如何请求数据
fetch 如何请求数据
在 传统Ajax 时代,进行 API 等网络请求都是通过XMLHttpRequest或者封装后的框架进行网络请求,然而配置和调用方式非常混乱,对于刚入门的新手并不友好
二 与Ajax对比
使用Ajax请求一个 JSON 数据一般是这样:
同样我们使用fetch请求JSON数据:
从两者对比来看,fetch代码精简许多,业务逻辑更清晰明了,使得代码易于维护,可读性更高。
总而言之,Fetch 优点主要有:
1. 语法简洁,更加语义化,业务逻辑更清晰
2. 基于标准 Promise 实现,支持 async/await
3. 同构方便,使用isomorphic-fetch
三 Promise简介
由于 Fetch API 是基于 Promise 设计,接下来我们简单介绍下Promise工作流程,方便大家更好理解Fetch。
fetch方法返回一个Promise对象, 根据 Promise Api 的特性, fetch可以方便地使用then方法将各个处理逻辑串起来, 使用 Promise.resolve() 或 Promise.reject() 方法将分别返会肯定结果的Promise或否定结果的Promise, 从而调用下一个then 或者 catch。一旦then中的语句出现错误, 也将跳到catch中。
四 请求常见数据格式
接下来将介绍如何使用fetch请求本地文本数据,请求本地JSON数据以及请求网络接口。其实操作相比与Ajax,简单很多!
1.fetch请求本地文本数据
本地有一个test.txt文档,通过以下代码就可以获取其中的数据,并且显示在页面上。
2.fetch请求本地JSON数据
本地有个posts.json数据,与请求本地文本不同的是,得到数据后还要用forEach遍历,最后呈现在页面上。
3.fetch请求网络接口
获取 https://api.github.com/users
中的数据,做法与获取本地JSON的方法类似,得到数据后,同样要经过处理
知识点来源:https://segmentfault.com/a/1190000017453672
fetch 如何请求数据的更多相关文章
- 解析Fetch实现请求数据
一 序言 在 传统Ajax 时代,进行 API 等网络请求都是通过XMLHttpRequest或者封装后的框架进行网络请求,然而配置和调用方式非常混乱,对于刚入门的新手并不友好.今天我们介绍的Fetc ...
- React native 中使用Fetch请求数据
一.代码 import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Text, View } from ' ...
- node后台fetch请求数据-Hostname/IP doesn't match certificate's altnames解决方法
一.问题背景 基于express框架,node后台fetch请求数据,报错Hostname/IP doesn't match certificate's altnames..... require(' ...
- 前端向服务器请求数据并渲染的方式(ajax/jQuery/axios/vue)
原理: jQuery的ajax请求:complete函数一般无论服务器有无数据返回都会显示(成功或者失败都显示数据): return result
- 解决React Native使用Fetch API请求网络报Network request failed
问题来源: 1 . 在测试fetch数据请求时,Xcode9.0以上的无法请求https, 需要在Xcode中加载项目后修改Info.plist的相关配置,具体如下参考 问题及解决方法一模一样,不再重 ...
- Spark Shuffle(三)Executor是如何fetch shuffle的数据文件(转载)
1. 前言 在前面的博客中讨论了Executor, Driver之间如何汇报Executor生成的Shuffle的数据文件,以及Executor获取到Shuffle的数据文件的分布,那么Executo ...
- React学习(4)——向服务器请求数据并显示
本文中涉及到的技术包括:node.js/express服务器的搭建.fetch发送数据请求. 在之前的几篇文章中,介绍了如何搭建基础的React项目,以及一些简单知识,现在,我们还需要掌握如何用Rea ...
- vue请求数据
vue-resource: 推荐教程:https://www.runoob.com/vue2/vuejs-ajax.html 1. 需要安装vue-resource模块, 注意加上 --save np ...
- C# http请求数据
http中get和post请求的最大区别:get是通过URL传递表单值,post传递的表单值是隐藏到 http报文体中 http以get方式请求数据 /// <summary> /// g ...
随机推荐
- 【codeforces 803E】Roma and Poker
[题目链接]:http://codeforces.com/contest/803/problem/E [题意] 给你一个不完整的胜负平序列(不完整是指中间有些地方为问号,让你自己选择胜负平) 让你复原 ...
- Java基础学习总结(35)——Java正则表达式详解
在Sun的Java JDK 1.40版本中,Java自带了支持正则表达式的包,本文就抛砖引玉地介绍了如何使用java.util.regex包. 可粗略估计一下,除了偶尔用Linux的外,其他Linu ...
- NYIST 1083 美丽的校园
美丽的校园时间限制:1000 ms | 内存限制:65535 KB难度:3 描述 美丽的校园需要大家维护,作为南工学子,当然有责任! 在计科系门前有n棵树,按一行排列在计科系楼前面,它们在一条直线上, ...
- rabbitMQ学习笔记(一)Windows 与Linux下rabbitMQ的安装
版权声明:本文为博主原创文章,未经博主允许不得转载. Normal 0 7.8 磅 0 2 false false false EN-US ZH-CN X-NONE /* Style Definiti ...
- CF894A QAQ
CF894A QAQ 题意翻译 题目大意: 给定一个字符串,字符串长度<=100,现在要求出字符串中'QAQ'的个数,注意,'QAQ'可以不连续,只要有顺序就可以了,例如QABQ也有一个QAQ ...
- Linux中/etc/init.d
原文链接:http://blog.163.com/laorenyuhai126@126/blog/static/193507792010525110516/ 在这个目录下的档案都是连结档,均指向到 ...
- uva是崩了 吗,还是我太年轻?
刚刚提交了一道题,发现提交状态一直是in judge queue,去提交状态那里看了下,排在我20分钟前的也在in judge queue,不知道前面还有多少.顿时感到好无力......
- 24岁菜鸟,能一个人撑起App开发吗
"疲惫吾心.怎样躲藏.四处荒芜,怎话忧伤?"临近中秋,看到艾瑞斯的QQ签名,无尽的伤感.这个年仅24的青年.连续3年没有回家了,近期一个月总是失眠,没有家人的陪伴,就连女朋友 ...
- 项目记录22-- tolua基于lua框架事件派发
每天晚上抽点时间写一点点就一点点,曾经不写博客可是如今.不为别的仅仅是为了告诉别人我还存在. 这几天在地铁上发现好多人都还在玩消除游戏,今天起码看到5个人,可是玩的版本号都不一样.看 ...
- linux中设置TAB键的宽度
对于编程的人员来说,常常须要排版代码,这时候就须要TAB键,但TAB键的宽度太大,非常有可能代码太长,延伸到下一行,这个时候你就须要设置TAB键的宽度了. linux下设置TAB键的宽度,做法例如以下 ...