React开发中使用fetch进行异步请求
React开发中使用fetch进行异步请求
最新的Web API接口中提供了一个全局fetch方法,从而以一种更为简单、合理的方式来支持跨网络异步获取资源。 这种功能以前是使用 XMLHttpRequest实现的。Fetch提供了一个更好的替代方法,可以很容易地被其他技术使用,例如 Service Workers。Fetch还提供了单个逻辑位置来定义其他HTTP相关概念,例如CORS和HTTP的扩展。 请注意,fetch规范与jQuery.ajax()主要有两种方式的不同:
基本的fetch请求举例一个基本的 fetch请求设置起来很简单。看看下面的代码: fetch(‘http://example.com/movies.json‘) .then(function(response) { return response.json(); }) .then(function(myJson) { console.log(myJson); }); 这里我们通过网络获取一个JSON文件并将其打印到控制台。最简单的用法是只提供一个参数用来指明想fetch()到的资源路径,然后返回一个包含响应结果的promise(一个 Response 对象)。 第二个可选参数fetch() 接受第二个可选参数,一个可以控制不同配置的 init 对象: 参考 fetch(),查看所有可选的配置和更多描述。 postData(‘http://example.com/answer‘,{answer: 42}) .then(data => console.log(data)) // JSON from `response.json()` call .catch(error => console.error(error)) function postData(url,data) { // Default options are marked with * return fetch(url,{ body: JSON.stringify(data),// must match ‘Content-Type‘ header cache: ‘no-cache‘,// *default,no-cache,reload,force-cache,only-if-cached credentials: ‘same-origin‘,// include,same-origin,*omit headers: { ‘user-agent‘: ‘Mozilla/4.0 MDN Example‘,‘content-type‘: ‘application/json‘ },method: ‘POST‘,// *GET,POST,PUT,DELETE,etc. mode: ‘cors‘,// no-cors,cors,*same-origin redirect: ‘follow‘,// manual,*follow,error referrer: ‘no-referrer‘,// *client,no-referrer }) .then(response => response.json()) // parses response to JSON } 发送带凭据的请求为了让浏览器发送包含凭据的请求(即使是跨域源),要将credentials: ‘include‘添加到传递给 fetch()方法的init对象。 fetch(‘https://example.com‘,{ credentials: ‘include‘ }) 如果你只想在请求URL与调用脚本位于同一起源处时发送凭据,请添加credentials: ‘same-origin‘。 // The calling script is on the origin ‘https://example.com‘ fetch(‘https://example.com‘,{ credentials: ‘same-origin‘ }) 要改为确保浏览器不在请求中包含凭据,请使用credentials: ‘omit‘。 fetch(‘https://example.com‘,{ credentials: ‘omit‘ }) 上传 JSON 数据下面的示例片断展示了使用fetch()方法以POST方式发送 JSON编码的数据: var url = ‘https://example.com/profile‘; var data = {username: ‘example‘}; fetch(url,{ method: ‘POST‘,// or ‘PUT‘ body: JSON.stringify(data),// data can be `string` or {object}! headers: new Headers({ ‘Content-Type‘: ‘application/json‘ }) }).then(res => res.json()) .catch(error => console.error(‘Error:‘,error)) .then(response => console.log(‘Success:‘,response)); 上传文件在最新浏览器API编程中,你可以使用一个HTML <input type="file" /> 输入元素,并结合FormData() 函数和fetch()函数实现上传文件: var formData = new FormData(); var fileField = document.querySelector("input[type=‘file‘]"); formData.append(‘username‘,‘abc123‘); formData.append(‘avatar‘,fileField.files[0]); fetch(‘https://example.com/profile/avatar‘,{ method: ‘PUT‘,body: formData }) .then(response => response.json()) .catch(error => console.error(‘Error:‘,response)); 检测请求是否成功如果遇到网络故障,fetch() (其实是一个promise对象)将会Reject,带上一个 TypeError 对象。虽然这个情况经常是遇到了权限问题或类似问题——比如 404 不是一个网络故障。想要精确的判断 fetch() 是否成功,需要包含 promise解析的情况,此时再判断 Response.ok 是不是为 true。类似以下代码: fetch(‘flowers.jpg‘).then(function(response) { if(response.ok) { return response.blob(); } throw new Error(‘Network response was not ok.‘); }).then(function(myBlob) { var objectURL = URL.createObjectURL(myBlob); myImage.src = objectURL; }).catch(function(error) { console.log(‘There has been a problem with your fetch operation: ‘,error.message); }); 自定义请求对象除了传给 fetch() 一个资源的地址,你还可以通过使用 Request() 构造函数来创建一个 request 对象,然后再作为参数传给 fetch(): var myHeaders = new Headers(); var myInit = { method: ‘GET‘,headers: myHeaders,mode: ‘cors‘,cache: ‘default‘ }; var myRequest = new Request(‘flowers.jpg‘,myInit); fetch(myRequest).then(function(response) { return response.blob(); }).then(function(myBlob) { var objectURL = URL.createObjectURL(myBlob); myImage.src = objectURL; }); Request() 和 fetch() 接受同样的参数。你甚至可以传入一个已存在的 request 对象来创造一个拷贝: var anotherRequest = new Request(myRequest,myInit); 这个很有用,因为 request 和 response bodies 只能被使用一次(译者注:这里的意思是因为设计成了 stream 的方式,所以它们只能被读取一次)。创建一个拷贝就可以再次使用 request/response 了,当然也可以使用不同的 init 参数。 React开发中使用fetch要在不支持的浏览器中使用Fetch,可以使用Fetch Polypill(https://github.com/github/fetch)。 上面示例中使用了 fetch API。它是替代 XMLHttpRequest 用来发送网络请求的非常新的 API。由于目前大多数浏览器原生还不支持它,React开发中建议你使用 cross_fetch 库(https://github.com/lquixada/cross-fetch): // 每次使用 `fetch` 前都这样调用一下 import fetch from ‘cross_fetch‘ 在底层,它在浏览器端使用 whatwg-fetch polyfill,在服务器端使用 node-fetch,所以如果当你把应用改成 同构 时,并不需要改变 API 请求。 注意,fetch polyfill 假设你已经使用了 Promise 的 polyfill。确保你使用 Promise polyfill 的一个最简单的办法是在所有应用代码前启用 Babel 的 ES6 polyfill: // 在应用中其它任何代码执行前调用一次 import ‘babel-polyfill‘ 一个相对完整的使用fetch的例子import fetch from ‘cross-fetch‘ export const REQUEST_POSTS = ‘REQUEST_POSTS‘ export const RECEIVE_POSTS = ‘RECEIVE_POSTS‘ export const INVALIDATE_SUBREDDIT = ‘INVALIDATE_SUBREDDIT’ // 来看一下我们写的第一个 thunk action 创建函数! export function fetchPosts(subreddit) { // Thunk middleware 知道如何处理函数。 return function (dispatch) { // 首次 dispatch:更新应用的 state 来通知 // API 请求发起了。 dispatch(requestPosts(subreddit)) // thunk middleware 调用的函数可以有返回值, // 它会被当作 dispatch 方法的返回值传递。 // 这个案例中,我们返回一个等待处理的 promise。 // 这并不是 redux middleware 所必须的,但这对于我们而言很方便。 return fetch(`http://www.subreddit.com/r/${subreddit}.json`) .then( response => response.json(),// 不要使用 catch,因为会捕获 // 在 dispatch 和渲染中出现的任何错误, // 导致 ‘Unexpected batch number‘ 错误。 // https://github.com/facebook/react/issues/6895 error => console.log(‘An error occurred.‘,error) ) .then(json => // 可以多次 dispatch! // 这里,使用 API 请求结果来更新应用的 state。 dispatch(receivePosts(subreddit,json)) ) }} (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |