react native fetch 简单封装

使用 Promise.race(),进行超时判断的处理

关于 Promise.all() 与 Promise.race()

前者都把每个 Promise 返回的结果都给返回出来,后者返回先执行的 

export default class HttpUtil {
  /**
   * 
   * @param {*} url     请求的 url 地址
   * @param {*} params  请求的参数
   */
  static get(url,params) {
    if(params) {
        url += '?' + params;
    }
    let timeOut = new Promise((resolve,reject) => {
      setTimeout(() => {
        let data = {msg:'请求超时'}
        reject(data)
      },10000)
    })
    let getFetch = new Promise((resolve,reject) => {
      fetch(url)
        .then(response => response.json())
        .then(result => {
          resolve(result);
        })
        .catch(err => {
          let data = {
            msg: '请求出错',
            err,
          }
          reject(data)
        })
    })
    return Promise.race([timeOut, getFetch])
      .then(result => {
        return result
      })
  }

  /**
   * 
   * @param {*} url  url 请求的 url 地址
   * @param {*} data params 请求的参数
   * 以 from 形式提交
   */
  static post(url,data) {
    let timeOut = new Promise((resolve,reject) => {
      setTimeout(() => {
        reject('请求超时')
      },10000)
    })
    let postFetch = new Promise((resolve,reject) => {
      fetch(url, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded',
        },
        body: data
      })
        .then((response) => response.json())
        .then((result) => {
          resolve(result);
        })
        .catch((error) => {
          reject(error);
        });
    })
    return Promise.race([timeOut, postFetch])
      .then(result => {
        return result
      })
  }

  /**
   * 
   * @param {*} url  url 请求的 url 地址
   * @param {*} data params 请求的参数
   * 以 json 格式提交
   */
  static postJson(url,data) {
    let timeOut = new Promise((resolve,reject) => {
      setTimeout(() => {
        reject('请求超时')
      },10000)
    })
    let postFetch = new Promise((resolve,reject) => {
      fetch(url, {
        method: 'POST',
        headers: {
          'Accept': 'application/json',
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(data)
      })
        .then((response) => response.json())
        .then((result) => {
          resolve(result);
        })
        .catch((error) => {
          reject(error);
        });
    })
    return Promise.race([timeOut, postFetch])
      .then(result => {
        return result
      })
  }
}

 

你可能感兴趣的:(react,native)