React fetch封装

http.js

export const $http = {
  URL:'这里是要请求的url',
  UrlEncode: (obj) => {
    if(!obj || Object.prototype.toString.call(obj) !== '[object Object]'){
      return '';
    }
    let params = [];
    for(let key in obj) {
      params.push(encodeURIComponent(key) + '=' + encodeURIComponent(obj[key]));
    }
    return params.join('&');
  },
  get: (Nothis,Objson) => {
    let Alldata = '';
    if(Objson.data) {
      Alldata = '?' + $http.UrlEncode(Objson.data);
    }
    fetch(`${$http.URL}${Objson.url}${Alldata}`,{
      method:'get',
      mode:'cors',
      headers:{
        'Access-Token': localStorage.getItem('token')
      },
    }).then((res) => {
    // 如果http状态码正常,则直接返回数据
      if(res.status !== 200) {
        throw res.status
      }else{
        let Data;
        switch (Objson.dataType) {
          case 'json':
          {
            Data = res.json()
          }
          break;

          case 'text':
          {
            Data = res.test()
          }
          break;
        }
        return Data
      }
    }).then((res) => {
      Objson.success.call(Nothis, res)
    }).catch(( error ) => {
      if(Objson.error) {
        Objson.error.call(Nothis,error)
      }
    });
  },

  post:( Nothis , Objson) => {
    let formData = new FormData();
    if( Objson.data ) {
      let OB = Objson.data;
      for(let i in OB ){
        formData.append(i,OB[i])
      }
    }

    fetch(`${$http.URL}${Objson.url}`, {
      method: 'post',
      mode: 'cors',
      headers: {
        'Access-Token' : localStorage.getItem('token')
      },
      body:formData
    }).then( ( res ) => {
      if(res.status !== 200 ){
        throw res.status
      }else{
        let Data;
        switch ( Objson.dataType ) {
          case 'json':{
            Data = res.json()
          }
          break;
          case 'text':{
            Data = res.test()
          }
          break;
        }
        return Data
      }
    }).then(( res ) => {
      Objson.success.call(Nothis, res)
    }).catch(( error ) => {
      if(Objson.error ) {
        Objson.error.call(Nothis,error)
      }
    });
  },

  jump:() => {
    fetch(`${$http.URL}请求的url`, {
      method:'get',
      mode:'cors',
      headers:{
        'Access-Token': localStorage.getItem('token')
      },
    }).then(( res ) => {
      if(res.status !== 200) {
        throw res.status
      }
    }).catch(( error ) => {
      if(isNaN(error)) {
        if(error.message.substring(0,6) === 'Failed'){
          alert('服务器出错,请联系相关人员')
        }
        return
      }
      if(error === 401) {
        localStorage.removeItem('token');
        localStorage.removeItem('thisToken');
        localStorage.setItem('exitState','2')
        window.location.href = window.location.protocol + '//' + window.location.host + 'login'
      }
    })
  }
}

使用

// 引入
import { $http } from '@function/http'

//发送请求
  $http.get(this, {
      url: "/live/visit/front/save",
      dataType: "json",
      success: function (res) { },
    });
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值