门外汉之认识-fetch

介绍

fetch:新一代的ajax技术。能够发送request请求和response获取资源,当时看到这里觉得很高级,这不就是一个浏览器的基础核心功能吗?听说是一个api就感觉简单了,使用时通过传参那样的简单操作就能实现?

安装

$ npm install node-fetch --save

然后引用fetch我们就能使用了。

fetch()方法

fetch方法用于发送请求和获取资源。

我们通过下图大致的对fetch方法有个印象,它基本上就是这个样子。作为一个门外汉,最关心的莫过于这个东西能做什么,以及怎么使用的。

一个方法当然最重要的就是传入它的参数什么,以及它返回的结果是什么。

它必需要的参数的是url,可选的参数是options.使用形式如下:fetch括号里url后面的大括号里面的部分就是options。

想必看到这里的,你会想到它返回的是什么,fetch方法最后返回的是一个promise(承诺)对象,承诺只有两种结果状态,要么成功么失败。只有异步操作的结果可以决定当前是那种状态,其他的任何操作都无法改变这个状态。我们可以任何时候得到这个结果,所以我们可以通过回调来这么做。你还会对 then()这个感兴趣。其实then()方法就是异步执行,就是当.then()前的方法执行完后再执行then()内部的程序。

需要了解到的是,options 里面的参数有哪些呢?

{

// fetch部分 标准属性

method: 'GET',

headers: {}, // 请求头. 格式与请求头构造函数所接受的格式相同

body: null, // 请求体。可以为空,一个字符串,一个缓冲等

redirect: 'follow', // 提取重定向头设为manual, 拒绝重定向设为error

// 是 node-fetch 扩展的一些属性

follow: 20, // 最大重定向数,0为不重定向

timeout: 0, // req/res定时,它重置的重定向。设为0时禁用(操作系统限制)

compress: true, // support gzip/deflate content encoding. false to disable

size: 0, // 最大响应体大小(以字节为单位)。设为0时禁用

agent: null // HTTP(s)实例,允许自定义代理、证书等。

}

headers里又有以下默认设置:

这些参数需要用到的时候知道即可。

Headers(请求头)

Headers类允许你对request和response 的请求头执行各种操作,包括设置,添加,删除等。

一般我们用request对象来包装请求头。

request

一个request对象表示一次fetch对象的调用请求。在request里的参数有

真正使用

response

response表示响应,是一次请求的响应数据。在fetch里通常是在回调中使用。

response对象的属性:

response对象的方法:

body

body是一个抽象接口,包含适用于请求和响应类的方法。Request和Response都为他们的body提供了以下方法.

实例

1.获取网址内容

// text或html

fetch('https://github.com/')

.then(res => res.text())

.then(body => console.log(body));

// json

fetch('https://api.github.com/users/github')

.then(res => res.json())

.then(json => console.log(json));

2.获取图片

fetch('https://assets-cdn.github.com/images/modules/logos_page/Octocat.png')

.then(res => {

const dest = fs.createWriteStream('./octocat.png');

res.body.pipe(dest);

});

3.post提交

fetch('http://httpbin.org/post', { method: 'POST', body: 'a=1' })

.then(res => res.json())

.then(json => console.log(json));

// post提交json文var body = { a: 1 };

fetch('http://httpbin.org/post', {

method: 'POST',

body: JSON.stringify(body),

headers: { 'Content-Type': 'application/json' },

})

.then(res => res.json())

.then(json => console.log(json));

更多实例可访问地址:https://github.com/bitinn/node-fetch/blob/master/test/test.js

学习更多node-fetch知识:https://www.npmjs.com/package/node-fetch

日记本

如果觉得我的文章对您有用,请随意赞赏。您的支持将鼓励我继续创作!

赞赏支持
被以下专题收入,发现更多相似内容