最近做React native开发,遇到了这种fetch请求,说实话,以前用ajax比较多,对这种fetch请求
还真是不怎么了解,所以花时间百度一下,看看大家怎么用的。顺便也需要封装一下网路请求的
get和post方法,方便下面的调用。
话不多说,直入主题:
开发中,从网络上加载数据一直是重点和难点,尤其是在做相应的细节优化方面,在React Native 中通常是用哪种
方式加载网络数据呢?
React Native 中通常是通过 Ajax 从服务器获取数据,在 componentDidMount 方法中创建 Ajex 请求,等到请求成功,
再用 this.setState 方法重新渲染UI
fetch 目前还不是 W3C 规范,是由 whatag 负责研发。与 Ajax 不同的是,它的 API 不是事件机制,而是采用目前
流行的 Promise(MDN Promise) 方式处理
格式:
fetch(url, init) .then((response) => { // 数据解析方式 }) .then((responseData) => { // 获取到的数据处理 }) .catch((error) => { // 错误处理 }) .done(); 123456789 123456789 上面的示例中的 init 是一个对象,他里面包含了: method:请求方式(GET、POST、PUT等)。headers:需要用到 Headers 对象使用这个参数。body:需要发送的数据mode:跨域设置(cors, no-cors, same-origin)cache:缓存选项(default, no-store, reload, no-cache, force-cache, or only-if-cached)译注:
body:不可传对象,用JSON.stringify({…})也不可以,在jQuery 中会自动将对象封装成 formData 形式,fetch不会。mode属性控制师傅跨域,其中 same-origin(同源请求,跨域会报error)、no-cors(默认,可以请求其它域的资源,不能访问response内的属性)和 cros(允许跨域,可以获取第三方数据,必要条件是访问的服务允许跨域访问)。使用 fetch 需要注意浏览器版本,但 React-Native 则不需要考虑。response 对象可以有如下几种解析方式
arrayBuffer()json()text()blob()formData()下面是一个最基本的请求,只传入一个参数,默认为 GET 方式请求
fetch(url) .then((response) => response.json()) // json方式解析,如果是text就是 response.text() .then((responseData) => { // 获取到的数据处理 }) .catch((error) => { // 错误处理 }) .done(); 123456789 123456789 针对表单提交的请求,我们通常采用 POST 的方式。方式一:
fetch(url, { method: "POST", headers: { "Content-Type": "application/x-www-form-urlencoded" } body:"key1=value&key2=value…&keyN=value" }) .then((response) => { // 数据解析方式 }) .then((responseData) => { // 获取到的数据处理 }) .catch((error) => { // 错误处理 }) .done(); 12345678910111213141516 12345678910111213141516 在 JQuery 中,传入对象框架会自动封装成 formData 的形式,但是在 fetch 中没有这个功能,所以我们需要自己初始化一个 FormData直接传给 body (补充:FormData也可以传递字节流实现上传图片功能)方式二:
let formData = new FormData(); formData.append("参数", "值"); formData.append("参数", "值"); fetch(url, { method:'POST, headers:{}, body:formData, }).then((response)=>{ if (response.ok) { return response.json(); } }).then((json)=>{ alert(JSON.stringify(json)); }).catch.((error)=>{ console.error(error); }) 123456789101112131415161718 123456789101112131415161718译注:
application/x-www-form-urlencoded: 窗体数据被编码为名称/值对。这是标准的编码格式。multipart/form-data: 窗体数据被编码为一条消息,页上的每个控件对应消息中的一个部分。 text/plain: 窗体数据以纯文本形式进行编码,其中不含任何控件或格式字符。Fetch 跨域请求的时候默认是不带 cookie 的,如果需要进行设置 credentials:’include’。