react前端XMLHttpRequest请求添加token

￡神魔★判官ぃ 2022-11-11 05:17 368阅读 0赞

let xhr = new XMLHttpRequest();
        xhr.timeout = 0;
        var token: any = localStorage.getItem('token_mare_basic') == null ? "" : localStorage.getItem('token_mare_basic');
        xhr.open('GET', `${ omsTankInfoServer}/oms/tas/exportTas?tankAreaId=` + record.id, true);
        xhr.responseType = 'blob';
        xhr.setRequestHeader("token", token)
        xhr.send();
        // 请求成功回调函数
        xhr.onload = function (e) { 
          console.log(e, xhr)
          if (this.status == 200) { 
            var blob = this.response;
            var filename = record?.tankAreaName + "罐区TAS组态.zip";
            var a = document.createElement('a');
            var url = URL.createObjectURL(blob);
            a.href = url;
            a.download = filename;
            document.body.appendChild(a);
            a.click();
            window.URL.revokeObjectURL(url);
          }
          else { 
            message.error("接口请求失败！")
          }
        };
        // 请求结束
        xhr.onloadend = e => { 
          console.log('request loadend');
        };
        // 请求出错
        xhr.onerror = e => { 
          console.log('request error');
        };
        // 请求超时
        xhr.ontimeout = e => { 
          console.log('request timeout');
        };

也可以封装成工具：

/**
     * 
     * @param url xmlhttprequest请求封装
     * @param responsrType 
     */
    export const XMLHttpRequestUtil = (url: string, responsrType: any) => { 
      let xhr = new XMLHttpRequest();
      xhr.timeout = 0;
      var token: any = localStorage.getItem('token_mare_basic') == null ? "" : localStorage.getItem('token_mare_basic');
      xhr.open('GET', url, true);
      xhr.responseType = responsrType;
      xhr.setRequestHeader("token", token)
      xhr.send();
      return xhr;
    }
    
    /**
     * 
     * @param fileName 下载链接对应的文件
     * @param blob 
     */
    export const downloadHref = (fileName: string, blob: any) => { 
      var a = document.createElement('a');
      var url = URL.createObjectURL(blob);
      a.href = url;
      a.download = fileName;
      document.body.appendChild(a);
      a.click();
      window.URL.revokeObjectURL(url);
    }

发表评论取消回复

表情：

评论列表（有 0 条评论，368人围观）

还没有评论，来说两句吧...

相关阅读

相关 XMLHttpRequest发送POST请求

var url = "https://xxxxx:8443/kpfw/lzfpkj/v1/tyfpkj"; var postStr = '{"Fphm": "2

桃扇骨/ 2023年10月13日 18:57/ 0 赞/ 22 阅读

相关 springboot 添加请求头（swagger token认证）

-------------------- springboot 添加请求头（swagger token认证）应用：添加全局的token，避免每次都需要携带tok

今天药忘吃喽~/ 2023年07月17日 14:19/ 0 赞/ 31 阅读

相关 axios请求中添加token，Authorization中添加token

axios请求中添加token，Authorization中添加token axios请求中添加token，应在header中添加的token，使用Authorizati

电玩女神/ 2023年07月07日 14:56/ 0 赞/ 1 阅读

相关基本的AJAX请求：XMLHttpRequest

There are a number of common front-end tasks that many of us never touched the deep, dir

àì夳堔傛蜴生んèń/ 2023年02月22日 03:41/ 0 赞/ 114 阅读

相关 react前端XMLHttpRequest请求添加token

let xhr = new XMLHttpRequest(); xhr.timeout = 0; var token: any = lo

￡神魔★判官ぃ/ 2022年11月11日 05:17/ 0 赞/ 369 阅读

相关 springcloud+feignClient远程调用添加请求头token

一、使用`@RequestHeader`添加请求头 package com.supcon.mare.tankinfo.service.feign;

忘是亡心i/ 2022年10月28日 10:26/ 0 赞/ 1270 阅读

相关 axios请求中添加token，Authorization中添加token

axios({ method: 'get', url: url, responseType: 'blob',

港控/mmm°/ 2022年10月16日 00:49/ 0 赞/ 225 阅读

相关 Postman请求接口自动添加token或者其他请求头

1、编辑collections 右击collections,点击edit ![在这里插入图片描述][9a8678f22c15eddc7a67f0e4adf741bd.

迷南。/ 2022年08月31日 04:38/ 0 赞/ 424 阅读

相关跨域 XMLHttpRequest 请求

跨域 XMLHttpRequest 请求普通网页能够使用[XMLHttpRequest][]对象发送或者接受服务器数据, 但是它们受限于[同源策略][Link

清疚/ 2022年08月04日 15:56/ 0 赞/ 243 阅读

相关 ajax实现请求头添加token

mainUrl是定义的全局的域名，localStorage.token是登录进来存储的token，这个token最好是放在session中，async表示异步微信

淡淡的烟草味﹌/ 2022年04月22日 04:24/ 0 赞/ 1212 阅读