用fetch獲取數據

最近用react+webapck構建一個項目，獲取數據時再用jq的ajax仿佛已經格格不入。用網上流行的

fetch發現是挺好用的，但是瀏覽器兼容性實在太差了,手機端幾乎全部不支持，也不支持跨域jsonp

用whatwg-fetch試了一下，發現是可以用的，而且跟fetch無二

還有一個就是axios,不過暫時還沒有用。

附：fetch代碼

function http(url, setting) {
    //設置參數的初始值
    let opts={
        method: (setting.method || 'GET').toUpperCase(), //請求方式
        headers : setting.headers  || {}, // 請求頭設置
        credentials : setting.credentials  || true, // 設置cookie是否一起發送
        body: setting.body || {},
        mode : setting.mode  || 'no-cors', // 可以設置 cors, no-cors, same-origin
        redirect : setting.redirect  || 'follow', // follow, error, manual
        cache : setting.cache  || 'default' // 設置 cache 模式 (default, reload, no-cache)
    }
    let dataType = setting.dataType || "json", // 解析方式  
        data = setting.data || "" // 參數

    // 參數格式化
    function params_format (obj) {
        var str = ''
        for (var i in obj) {
            str += `${i}=${obj[i]}&`
        }
        return str.split('').slice(0, -1).join('')
    }

    if (opts.method === 'GET') {
        url = url + (data?`?${params_format(data)}`:'')
    }else{
        setting.body = data || {}
    }

    return new Promise( (resolve, reject) => {
        fetch(url, opts).then( async res => {
            let data = dataType === 'text' ? await res.text() :
                dataType === 'blob' ? await res.blob() : await res.json() 
            resolve(data)
        }).catch( e => {
            reject(e)
        })
    })
    
}

　　

import 'whatwg-fetch';
require('es6-promise').polyfill();

let common_url = '/weixin';  //服務器地址
let token = '';
/**
 * @param {string} url 接口地址
 * @param {string} method 請求方法：GET、POST，只能大寫
 * @param {JSON} [params=''] body的請求參數，默認為空
 * @return 返回Promise
 */
function fetchRequest(url, method, params = '') {
  let header = {
    "Content-Type": "application/json;charset=UTF-8",
    "accesstoken": token  //用戶登陸后返回的token，某些涉及用戶數據的接口需要在header中加上token
  };
  console.log('request url:', url, params);  //打印請求參數
  if (params == '') {   //如果網絡請求中沒有參數
    return new Promise(function (resolve, reject) {
      fetch(common_url + url, {
        method: method,
        headers: header,
        credentials: 'include'
      }).then((response) => {
        if (response.ok) {
          return response.json();
        } else {
          console.log(response)
          reject({ status: response.status })
        }
      }).then((responseData) => {
        resolve(responseData);
      })
        .catch((err) => {
          reject(err);
        })
    });
  } else {   //如果網絡請求中有參數
    return new Promise(function (resolve, reject) {
      fetch(common_url + url, {
        method: method,
        headers: header,
        credentials: 'include',
        body: JSON.stringify(params)   //body參數，通常需要轉換成字符串后服務器才能解析
      }).then((response) => {
        if (response.ok) {
          return response.json();
        } else {
          console.log(response)
          reject({ status: response.status })
        }
      }).then((responseData) => {
        resolve(responseData);
      })
        .catch((err) => {
          reject(err);
        })
    });
  }
}

export default fetchRequest;