用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;

　　

转载于:https://www.cnblogs.com/lyxverycool/articles/6497022.html