React Native Fetch封装那点事...

2019年8月22日 177次阅读 来源: idisfkj

每一门言语都离不开收集要求，有本身的一套Networking Api。React Native应用的是Fetch。 本日我们来谈谈与Fetch相干的一些事变。

purpose

经由过程这篇文章，你将相识到以下几点关于Fetch的独家报道

  • Fetch的简朴应用
  • Fetch的重要Api
  • Fetch应用注重事项
  • Fetch的Promise封装

fetch

fetch的应用非常简朴，只需传入要求的url

fetch('https://facebook.github.io/react-native/movies.json');

固然是不是要求胜利与数据的处置惩罚，我们还需处置惩罚胜利与失利的回调

function getMoviesFromApiAsync() {
  return fetch('https://facebook.github.io/react-native/movies.json')
    .then((response) => response.json())
    .then((responseJson) => {
      return responseJson.movies;
    })
    .catch((error) => {
      console.error(error);
    });
}

经由过程response.json()将要求的返回数据转化成json数据以便应用。经由过程.then来对数据举行转化处置惩罚或终究暴露给挪用者；.catch对非常的处置惩罚。

以上就是一个简朴的收集要求，该要求默许是get体式格局。那末post又该怎样要求呢？

Api & Note

在fetch中我们直接传入url举行要求，实在内部实质是应用了Request对象，只是将url相差到了Request对象中。

const myRequest = new Request('https://facebook.github.io/react-native/movies.json');
 
const myURL = myRequest.url; // https://facebook.github.io/react-native/movies.jsonflowers.jpg
const myMethod = myRequest.method; // GET
 
fetch(myRequest)
  .then(response => response.json())
  .then(responseJson => {
    //todo
  });

假如我们须要要求post，须要转变Request的method属性。

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

非常简朴，在url后直接传入{}对象，个中指定method应用post。

置信人人应当都晓得get与post的一个重要区别是get能够在url上直接增加参数，而post为了平安都不采纳直接将参数追加到url上，而是应用body来传给service端。

在应用body前，这里还需晓得headers。下面某个post要求的headers信息

《React Native Fetch封装那点事...》

须要注重的是Content-Type字段，它代表的是service端吸收的数据范例，图片中应用的是application/x-www-form-urlencoded。这关于我们的body来讲是非常重要的。只要婚配Content-Type的范例才准确的通报参数信息。

示例的代码应用的是application/json，所以body应用Json.stringify()举行参数转换，而关于Content-Type为application/x-www-form-urlencoded，须要应用queryString.stringify()。

Request中除了method、headers与body，另有以下属性

  • Request.cache: 要求的缓存形式(default/reload/no-cache)
  • Request.context: 要求的上下文(audio/image/iframe)
  • Request.credentials: 要求的证书(omit/same-origin/include)
  • Request.destination: 要求的内容形貌范例
  • Request.integrity: 要求的 subresource integrity
  • Request.mode: 要求的形式(cors/no-cors/same-origin/navigate)
  • Request.redirect: 要求的重定向体式格局(follow/error/manual)
  • Request.referrer: 要求的泉源(client)
  • Request.referrerPolicy: 要求的泉源政策(no-referrer)
  • Request.bodyUsed: 声明body是不是应用在response中

要求胜利以后，应用.then来转换数据，应用最多的是Body.json()，固然你也能够应用以下的几种数据转换范例

  • Body.arrayBuffer
  • Body.blob
  • Body.formData
  • Body.text

以上是fetch要求相干的属性与要领。假如你已有所相识，那末祝贺你对fetch的基础应用已过关了，下面临fetch的应用举行封装。

封装

在现实开辟中，url的host都是雷同的，差别的是要求的要领名与参数。而关于差别的环境(debug|release)要求的体式格局也能够差别。比方：在debug环境中为了轻易调试检察要求的参数是不是准确，我们会应用get来举行要求。所以在封装之前要明白什么是稳定的，什么是变化的，胜利与失利的相应处置惩罚。

经由上面的剖析，排列一下封装须要做的事变。

  • 稳定的: host,headers,body.json()
  • 变化的: url,method,body
  • 相应体式格局: Promise(resolve/reject)
function convertUrl(url, params) {
    let realUrl = ApiModule.isDebug?
        url + "?" + queryString.stringify(Object.assign({}, params, commonParams)) : url;

    if (ApiModule.isDebug) {
        console.log("request: " + realUrl);
    }
    return realUrl;
}

起首对url与参数params举行拼接，假如为debug形式将params拼接到url后。这里应用到了Object.assign()将params与commonParams组合成一个{}对象。终究经由过程queryString.stringify转化成string。

ApiModule.isDebug是原生通报过来的值，关于Android/IOS只需通报本身的ApiModule即可。

function getMethod() {
    return ApiModule.isDebug? "get": "post";
}

上述提到的get与post的要求机遇。

const headers = {
    Accept: 'application/json',
    "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8"
};

在headers中Content-Type范例为application/x-www-form-urlencode

function convertBody(params) {
    return ApiModule.isDebug? undefined : queryString.stringify(Object.assign({}, params, commonParams));
}

因为debug形式应用的是get体式格局，但get规定是不能有body的，所以这里应用了undefined来标识。同时为了婚配headers中的Content-Type，params的转化必需应用queryString.stringify；假如接收的是json,能够应用JSON.stringify。

定义完以后fetch对外只需接收params参数即可。

async function fetchRequest(params){
    let body = convertBody(params);
    fetch(convertUrl(baseUrl, params),{
        method: method,
        headers: headers,
        body: body
    })
    .then((response) => response.json())
    .then((responseJson) => {
        //todo success
    })
    .catch((error) => {
        if (ApiModule.isDebug) {
            console.error("request error: " + error);
        };
        //todo error
    });
}

fetch的要求封装完成，但我们的胜利与失利的状况并没有关照给挪用者，所以还须要一个回调机制。Promise是一个异步操纵终究完成或许失利的对象。它能够接收两个函数resolve、reject

const p = new Promise((resolve, reject){
    ...
    //success
    resolve('success')
    //error
    reject('error')
});
//use
p.then(success => {
        console.log(success);
    }, error => {
          console.log(error)    
});

将fetch要求放入到Promise的异步操纵中，如许一旦数据胜利返回就挪用resolve函数回调给挪用者；失利挪用reject函数，返回失利信息。而挪用者只需应用Promise的.then要领期待数据的回调关照。下面来看下完全的fetch封装。

async function fetchRequest(params){
    let body = convertBody(params);
    return new Promise(function(resolve, reject){
        fetch(convertUrl(baseUrl, params),{
            method: method,
            headers: headers,
            body: body
        })
        .then((response) => response.json())
        .then((responseJson) => {
            resolve(responseJson);
        })
        .catch((error) => {
            if (ApiModule.isDebug) {
                console.error("request error: " + error);
            };
            reject(error);
        });
    });
}

以后对fetch的应用就非常简朴了，只需传入须要的参数即可。

fetchRequest({method: "goods.getInfo", goodsId: 27021599158370074})
.then(res =>{
    this.setState({
        shareInfo: res.data.shareInfo
    });
});

以上是有关fetch的全部内容，固然在React Native中另有别的的第三方要求库：XMLHttpRequest，同时也支撑WebSockets。感兴趣的也能够去相识一下，置信会有不错的收成。

精选文章

5分钟吃透React Native Flexbox

ViewDragHelper之手势操纵神器

tensorflow-梯度下落,有这一篇就足够了

七大排序算法总结(java)

拉粉环节：觉得不错的能够来一波关注，扫描下方二维码，关注民众号，实时猎取最新学问技能。

《React Native Fetch封装那点事...》

    原文作者：idisfkj
    原文地址: https://segmentfault.com/a/1190000016200068
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞