《React-Native系列》32、 基於Fetch封裝HTTPUtil工具類

關於http請求的工具類，有很多，譬如：httpclient，okhttp。

那麼關於RN的處理HTTP請求的工具類呢，目前還沒有找到，所以自己簡單封裝了一個，避免代碼裡到處都是fetch方法。

好了，完整代碼如下：

var HTTPUtil = {};

/**
 * 基於 fetch 封裝的 GET請求
 * @param url
 * @param params {}
 * @param headers
 * @returns {Promise}
 */
HTTPUtil.get = function(url, params, headers) {
    if (params) {
        let paramsArray = [];
        //encodeURIComponent
        Object.keys(params).forEach(key => paramsArray.push(key + '=' + params[key]))
        if (url.search(/\?/) === -1) {
            url += '?' + paramsArray.join('&')
        } else {
            url += '&' + paramsArray.join('&')
        }
    }
    return new Promise(function (resolve, reject) {
      fetch(url, {
            method: 'GET',
            headers: headers,
          })
          .then((response) => {
              if (response.ok) {
                  return response.json();
              } else {
                  reject({status:response.status})
              }
          })
          .then((response) => {
              resolve(response);
          })
          .catch((err)=> {
            reject({status:-1});
          })
    })
}


/**
 * 基於 fetch 封裝的 POST請求  FormData 表單數據
 * @param url
 * @param formData  
 * @param headers
 * @returns {Promise}
 */
HTTPUtil.post = function(url, formData, headers) {
    return new Promise(function (resolve, reject) {
      fetch(url, {
            method: 'POST',
            headers: headers,
            body:formData,
          })
          .then((response) => {
              if (response.ok) {
                  return response.json();
              } else {
                  reject({status:response.status})
              }
          })
          .then((response) => {
              resolve(response);
          })
          .catch((err)=> {
            reject({status:-1});
          })
    })
}

export default HTTPUtil;

let formData = new FormData();
formData.append("id",1060);
      
HTTPUtil.post(url,formData,headers).then((json) => {
	//處理 請求success
   	if(json.code === 0 ){
            //我們假設業務定義code為0時，數據正常
        }else{
             //處理自定義異常
            this.doException(json);
        }
   },(json)=>{
     //TODO 處理請求fail
      
})