Fetch请求的封装

Fetch请求封装

import qs from qs
//根据环境变量区分接口
let baseURL = '';
let baseURLArr = [{
  type: 'development',
  url: 'http://127.0.0.1:8080'
}, {
  type: 'test',
  url: 'http://127.0.0.1:8080'
}, {
  type: 'production',
  url: 'http://127.0.0.1:8080'
}];
baseURLArr.forEach(item => {
  if (process.env.NODE_ENV === item.type) {
    baseURL = item.url;
  }
});

export default function request(url, option = {}) {
  url = baseURL + url
    //GET请求
    !options.method ? options.method = 'GET' : null;
  if (options.hasOwnProperty('params')) {
    if (/^(GET|DELETE|HEAD|OPTIONS)$/i.test(options.method)) {
      const ask = url.includes('?') ? '&' : '?';
      url += `${ask}${qs.stringify(params)}`;
    }
    delete options.params
  }
  //合并配置项
  options = Object.assign({
    //允许跨域携带资源凭证 same-origin同源可以 omit都拒绝
    credentials: 'include',
    //设置请求头
    headers: {}
  }, options);
  options.headers.Accept = 'application/json';

  //Token的校验
  const token = localStorage.getItem('token');
  token && (options.headers.Authorization = token);

  //POST请求处理
  if (/^(POST|PUT)$/i.test(options.method)) {
    !options.type ? options.type = 'urlencoded' : null;
    if (options.token === 'urlencoded') {
      options.headers['Content-Type'] = 'application/x-www-form-urlencoded'
      options.body = JSON.stringify(options.body)
    }
    if (options.type === 'Json') {
      options.headers['Content-Type'] = 'application/Json';
      options.body = JSON.stringify(options.body)
    }
  }

  return fetch(url, options).then(response => {
    //返回的结果可能是非200状态码
    if (!/^(2|3)\d{2}$/.test(response.status)) {
      switch (response.status) {
        case 401:
          break;
        case 403:
          localStorage.removeItem('token');
          break;
        case 404:
          break;
      }
      return Promise.reject(response)
    }
    return response.json()
  }).catch(error => {
    if (!window.navigator.onLine) {
      return;
    }
    return Promise.reject(error)
  })
};
//fetch(url,{
	method:'POST'
	params:{
	xxx:'xxx'
}
})
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值