fetch api初体验

  |   0 评论   |   126 浏览

背景

javascript来发送http请求,以前用的是jQuery或者XMLHttpRequest。

现在浏览器已经支持fetch api了。

所以需要补补fetch的课。

语法

用法

fetch长下面这个样子

fetch(...).then(fun2)
          .then(fun3) //各依赖有序执行
          .....
          .catch(fun)

语法

fetch(url, options).then(function(response) { 
// handle HTTP response
}, function(error) {
 // handle network error
})

初体验

准备数据文件

为了避免CORS跨域问题,在nodejs上先自己准备一个 data.json 文件,内容如下:

[{
	"time": "2018-11-24 00:00:25",
	"timestamp": 1542988825
}, {
	"time": "2018-11-24 00:01:25",
	"timestamp": 1542988885
}, {
	"time": "2018-11-24 00:02:25",
	"timestamp": 1542988945
}, {
	"time": "2018-11-24 00:03:25",
	"timestamp": 1542989005
}, {
	"time": "2018-11-24 00:04:25",
	"timestamp": 1542989065
}, {
	"time": "2018-11-24 00:05:25",
	"timestamp": 1542989125
}, {
	"time": "2018-11-24 00:06:25",
	"timestamp": 1542989185
}, {
	"time": "2018-11-24 00:07:25",
	"timestamp": 1542989245
}, {
	"time": "2018-11-24 00:08:25",
	"timestamp": 1542989305
}, {
	"time": "2018-11-24 00:09:25",
	"timestamp": 1542989365
}]

访问 http://localhost:3000/data.json, 即可以显示出来上面的数据文件,则说明准备好了。

控制台调试

打开浏览器http://localhost:3000/data.json页面的控制台,输入

fetch('data.json')

结果如下:

fetch('data.json')

1.  Promise {}

1.  __proto__: Promise
2.  [[PromiseStatus]]: "resolved"
3.  [[PromiseValue]]: Response

1.  body: (...)
2.  bodyUsed: false
3.  headers: Headers {}
4.  ok: true
5.  redirected: false
6.  status: 200
7.  statusText: "OK"
8.  type: "basic"
9.  url: "http://localhost:3000/data.json"
10.  __proto__: Response

其中 status值为200ok值为true,说明请求成功。

使用console.log打印结果

上面需要点开 >Promise 才能看见结果。

更方便的是,使用 console.log 来直接打印结果。

fetch('data.json').then(data => console.log(data))

效果:

Response {type: "basic", url: "http://localhost:3000/data.json", redirected: false, status: 200, ok: true, …}

只打印响应文本

上面打印出了 Response 对象,如果我们只想要响应文本呢?

fetch('data.json').then(data => data.text()).then(data => console.log(data))

效果:

[{"time":"2018-11-24 00:00:25","timestamp":1542988825},{"time":"2018-11-24 00:01:25","timestamp":1542988885},{"time":"2018-11-24 00:02:25","timestamp":1542988945},{"time":"2018-11-24 00:03:25","timestamp":1542989005},{"time":"2018-11-24 00:04:25","timestamp":1542989065},{"time":"2018-11-24 00:05:25","timestamp":1542989125},{"time":"2018-11-24 00:06:25","timestamp":1542989185},{"time":"2018-11-24 00:07:25","timestamp":1542989245},{"time":"2018-11-24 00:08:25","timestamp":1542989305},{"time":"2018-11-24 00:09:25","timestamp":1542989365}]

响应文本转成json格式

我们的响应文本已经准备成了json格式的,后期的工作也是基于json格式进行的。怎么样直接把json格式的文本直接转化成json格式的对象来使用呢?

fetch('data.json').then(data => data.json()).then(data => console.log(data))

效果:

(10) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]

异常获取

如果有异常怎么办呢?可以使用catch来捕获异常。下面示例会把异常打印出来。

fetch('http://data1.json').catch(e => console.error(e))

效果

VM2442:1 TypeError: Failed to fetch

主动检查结果

最佳实践方式是检查返回的结果是否正常。

下面是故意触发了一个error,仅为了演示使用,如下:

fetch('json.json').then(response => {if (response.ok) {throw new Error("throw new error demo")} }).then(data => console.log(data)).catch(e => console.error(e))

效果

index.js:1452 Error: throw new error demo
    at fetch.then.response (<anonymous>:1:62)

CORS跨域

最开始提到了因为要避免跨域,所以搞了个本地的data.json文件。

如何解决CORS跨域呢?

客户端

客户端解决:自己搭个nodejs服务端,在服务端将请求做一次转写

服务端

服务端解决:如果用的是SpringBoot的RestController的话,只要再增加一个@CrossOrigin注解即可。

效果如下:

Access-Control-Allow-Origin:*

后记

更多的内容就不写了,想深入了解的可以阅读下面的参考列表。。

参考

评论

发表评论

validate