react-native fetch的具体使用方法

fetch("http://blog.parryqiu.com").then(function(response){console.log(response)})

 self.fetch = function (input, init) {
  return new Promise(function (resolve, reject) {
   var request = new Request(input, init)
   var xhr = new XMLHttpRequest()
   xhr.onload = function () {
    var options = {
     status: xhr.status,
     statusText: xhr.statusText,
     headers: parseHeaders(xhr.getAllResponseHeaders() || '')
    }
    options.url = 'responseURL' in xhr "htmlcode">

 _timeout_fetch(fetch_promise, timeout = 15000) {
  let timeout_promise = new Promise(function (resolve, reject) {
   setTimeout(() => {
    reject('timeout promise');
   }, timeout)
  });
  return Promise.race([
   fetch_promise,
   timeout_promise
  ]);
 }



然后如下调用


 this._timeout_fetch(
    fetch(url, requestParams)
     .then(response => response.json())
     .then(responseData => {
      resolve(responseData);
     })
     .catch(error => {
      reject(error);
     })
   )


先定义一个Promise，其在超时时间结束后reject。将这个Promise和fetch合并到Promise.race中，则一旦这两个请求谁先执行，另外一个会被舍弃。这样完成超时时间的设置。


但是查看源码发现oc中是有超时时间设置这个选项的，且js和oc通信时也传了这个参数，问题是出在入口函数fetch处，只需要在上面fetch方法中添加上如下


 xhr.timeout = init.timeout || 0;


就可以在请求参数中设置超时时间了，如


 let requestParams = {
   method: method,
   header: {
    "Content-Type": "application/json;charset=UTF-8",
   },
   timeout: 1000
  };


2、fetch函数为何无法cancel？


fetch在原生端是NSURLSessionDataTask发的请求，这个是可取消的。在js端的XMLHttpRequest.js中也发现了abort方法，调用能够取消当前网络请求。问题出在了fetch的接口函数。


首先，要想请求能够取消，得拿到当前请求对应的requestId。请求的执行顺序是js端发起 -> OC生成Request，得到requestId，利用NSURLSessionDataTask发起请求 -> 将requestId通过回调的形式传回给js端，js若想取消该请求，执行abort方法即可。


要想fetch函数能够执行cancel，只需该方法将XMLHttpRequest对象返回即可。但是那样，就不再是一个Promise了。

也可以将cancel方法绑定到返回的Promise对象上，修改方法如下


 self.fetch = function (input, init) {
  var xhr = new XMLHttpRequest()
  let p = new Promise(function (resolve, reject) {
   var request = new Request(input, init)
   // xhr的各种设置，回调等
  })
  p.cancel = () => {
   xhr.abort()
  }
  return p;
 }



如此，调用的时候就比较恶习了，要如下


  let promise = fetch(url);
  promise.then(res => {
  }).then(res => {
  }).catch(err => {
  })
  promise.cancel() // 取消该网络请求


不能fecth().then().then()的模式调用，因为这样会导致返回的那个Promise不再是上面绑定了cancel的那个Promise。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。