Fetch API 入门使用

栏目: 前端 · 发布时间: 4年前

内容简介:html5 引入了新的网络请求接口使用 fetch 用户数据列表。async/await 语法

html5 引入了新的网络请求接口 Fetch API ,原生支持Promise,可配合 async/await 语法使用。

Fetch 实例

使用 fetch 用户数据列表。

fetch('/users')
.then(res=>res.json())//服务器返回的是json
.then(user=>{console.log(user);})
.catch(error=>{console.log(error);})
复制代码

async/await 语法

async function getUsers() {
  try {
    let res = await fetch('/users');
    let users = await res.json();
    console.log(users)
  } catch (error) {
   console.log(error)
  }
}
复制代码

fetch 返回的不是真正需要的数据,而是一个 Promise ,所有还需要使用它提供的方法进一步获取想要的数据。

具体用法

两种调用方式:

fetch(url,options)
fetch(req,options)
复制代码

推荐使用第一种,一眼就可以看到url,更加直观。

options 是一个对象,可设置以下字段:

  • method:请求方法,默认GET;
  • headers:请头信息,可以是简单的对象,也可以是 Headers 的实例;
  • body:发送数据。 BlodbufferSourceFormDataURLSearchParamsUSVstring ,GET、HEAD 没有body;
  • mode:请求模式。
    • cors:跨域请求;
    • no-cors:只允许使用 GETHEADPOST ;
    • same-origin:同源请求;
    • navigate:支持页面导航(不太明白)。
  • credentials:是否发送 cookies
    • omit:不发送,默认;
    • same-origin:同源发送;
    • include:发送。
  • cache:缓存策略:
    same-origin
    
  • redirect:重定向时的处理方法:
    • follow:跟随;
    • error:报错;
    • manual:用户手动跟随。
  • integrity:包含一个验证资源完整性的字符串。

Headers

Headers 用于构造请求头信息,构造函数接收一个对象,对象的 key-value 就是请求头的信息。

let headers = new Headers(
  {
    'content-type':'text/plain',
    'content-length':data.toString().length
  }
);
headers.append('X-Custom-header','AnotherValue');//追加
headers.has('content-type');//true 查询
headers.get('content-type');//'text/plain' 获取
// headers.getAll('content-type');//['text/plain'] getAll 被移除了
headers.delete('content-type');//删除
headers.set('content-type','json');//重写
复制代码

Request

请求对象。可以新建一个,也可以从已有的对象中继承。

let Url = '/users';
let req = new Request(Url,{method:'GET',headers})
// 扩展 request
let postReq= new Requset(req,{method:'POST'})
复制代码

Response

Response 实例是 fertch 处理完 promise 之后的返回的。也可以手动创建,在 servoceWorkers 中才真实有用。

let res = new Response(body,init)
复制代码

body 可以是 BolbBufferSourceFormDataURLSearchParamsUSVString 这些值。

init 是一个对象,可包含以下字段:

  • status:响应状态码;
  • statusText:状态文本;
  • headers:头部信息,普通对象或Headers 的实例。

response 的实例还有一些可读属性:

  • ok:请求是否成功,状态码为 2xx 都为 true
  • status:状态码;
  • statusText:状态文本;
  • bodyUesed:响应数据是否被用过;
  • headers:头部信息;
  • url:响应地址;
  • type:响应类型:
    no-cors
    

response 有一些方法来 reslove 响应信息。

  • json,解析响应信息为对象,resolve promise;
  • text,…………字符串…………;
  • bolb,转化响应Bold,resolve;
  • formData,………………;
  • arrayBuffer,…………。

以上所述就是小编给大家介绍的《Fetch API 入门使用》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Web标准之道

Web标准之道

阿一、棕熊、李战、丁学 / 人民邮电出版社 / 2009-8 / 35.00元

《Web标准之道:博客园精华集》由博客园知名博主联手打造,涉及Web标准、HTML/CSS、JavaScript、SEO优化等诸多领域,内容新颖,观点独特,妙语连珠。《Web标准之道:博客园精华集》并不是一本由代码和技巧堆积而成的集合,更多的是探讨了Web设计中若干理念和心得,其中多为经验之谈。无论对于从事Web前端设计的人士,还是对于那些从事Web后端编程的技术人员,《Web标准之道:博客园精华......一起来看看 《Web标准之道》 这本书的介绍吧!

正则表达式在线测试
正则表达式在线测试

正则表达式在线测试

RGB CMYK 转换工具
RGB CMYK 转换工具

RGB CMYK 互转工具

HSV CMYK 转换工具
HSV CMYK 转换工具

HSV CMYK互换工具