为了账号安全,请及时绑定邮箱和手机立即绑定

Fetch请求封装(vue)

Fetch请求封装。

//前置拼接urllet api = '****';//处理promise和fetch的兼容性以及引入require('es6-promise').polyfill();require('isomorphic-fetch');//处理get请求,传入参数对象拼接let formatUrl = obj => {  let params = Object.values(obj).reduce((a, b, i) => `${a}${Object.keys(obj)[i]}=${b}&`, '?');  return params.substring(0, params.length - 1);
};let Fetch = (url, option = {}) => {
  option.headers = option.headers || {};
  option.headers['pl'] = 'admin';

  option.headers['token'] = `${window.localStorage.getItem('token')}`;  const m = (option.method || '').toLocaleLowerCase();  // get query format
  if (m == 'get') {    if (option.query) {
      url = url + formatUrl(option.query);
    }
  }  //对非get类请求头和请求体做处理
  if (m === 'post' || m === 'put' || m === 'delete') {
    option.headers['Content-Type'] = option.headers['Content-Type'] || 'application/json';
    option.body = JSON.stringify(option.body);    // option.body = qs.stringify(option.body) //根据后台要求,如果有时候是java请求会用qs转
  }  return new Promise((resolve, reject) => {
    fetch(api + url, option)
      .then(response => {
        status = response.status;        if (response.status >= 500) {
          Fetch.systemError && Fetch.systemError('系统错误');
        }        return response;
      })
      .then(parseJSON)
      .then(response => {
        response.status = status;        if (response.status >= 401) {          if (response.state == 8888) {            //登陆超时返回状态吗

            Fetch.overTime && Fetch.overTime(response);
          }          if (response.state == 6666) {            //没有权限返回状态码
          }
        }
        resolve(response);
      })
      .catch(error => {        console.log('err', error);
        Fetch.otherError && Fetch.otherError(error.message);
      });
  });
};//response 转化function parseJSON(response) {  return response.json();
}export default Fetch;

main.js全局引入

//引入并自己封装的Fetch 方法import Fetch from './helper/api/fetch';
Vue.prototype.Fetch = Fetch;

使用。

//get 使用query传入字段,其他请求使用body,这里的get和body是请求参数对象
 let res = await this.Fetch('url', {        method: 'get',
        query
      });



作者:会拐弯的蜗牛
链接:https://www.jianshu.com/p/489a627d4ba3


点击查看更多内容
1人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消