加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

React_Native项目实战之fetch请求

发布时间:2020-12-15 07:17:41 所属栏目:百科 来源:网络整理
导读:摘要: fetch简介 在 AJAX 时代,进行请求 API 等网络请求都是通过XMLHttpRequest 或者封装后的框架进行网络请求。而在前端快速发展地过程中,为了契合更好的设计模式,产生了 fetch 框架。 fetch简介 在 AJAX 时代,进行请求 API 等网络请求都是通过XMLHttp

摘要:fetch简介 在 AJAX 时代,进行请求 API 等网络请求都是通过XMLHttpRequest 或者封装后的框架进行网络请求。而在前端快速发展地过程中,为了契合更好的设计模式,产生了 fetch 框架。

fetch简介

在 AJAX 时代,进行请求 API 等网络请求都是通过XMLHttpRequest 或者封装后的框架进行网络请求。而在前端快速发展地过程中,为了契合更好的设计模式,产生了 fetch 框架。 fetch相比XMLHttpRequest,提供更加强大、高效的网络请求方式,所以在 Hybrid App 开发模式中,大量的用到了fetch框架作为网络请求。

fetch在浏览器中使用

在 Chrome 浏览器中已经全局支持了 fetch 函数,打开调试工具,在 Console 中可以进行体验下fetch。先不考虑跨域请求的使用方法,我们先请求同域的资源。例如:

fetch("http://blog.csdn.net/xiangzhihong8").then(function(response){console.log(response)})  

fetch语法

使用 fetch 的构造函数请求数据后,返回一个 Promise 对象,然后根据具体的实际情况处理。

"http://baidu.com") .(response){  // ... }) 

说明,在请求后的 Response 中,常常有如下返回情况:

  • Response.status 也就是 StatusCode,如成功就是 200 ;
  • Response.statusText 是 StatusCode 的描述文本,如成功就是 OK ;
  • Response.ok 一个 Boolean 类型的值,判断是否正常返回,也就是 StatusCode 为 200-299 。

fetch请求实例

1.使用get方式进行网络请求,例如:

'http://nero-zou.com/test',{ method: 'GET' }).(response) { //获取数据,数据处理 }).catch((err) { //错误处理 }); 

2.使用post方式进行网络请求,例如:

let param = {user:'xxx',phone:'xxxxxx'}; fetch(url,{ method: 'post',114)">body: JSON.stringify(param) }).then(function(response) {  3.其它写法,例如:

try { fetch(url,{ method: body: catch(e) { //捕获异常消息  } 

4.带header 或其它参数,例如:

fetch(url,{ method: 'POST',headers: { 'Accept': 'application/json','Content-Type': body: JSON.stringify({ firstParam: 'yourValue',secondParam: 'yourOtherValue',}) }) 

fetch请求并填充界面

原文链接

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读