react前端XMLHttpRequest请求添加token

￡神魔★判官ぃ 2022-11-11 05:17 330阅读 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 条评论，330人围观）

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

相关阅读

相关 XMLHttpRequest发送请求和获取响应

发送请求 open(method, url, async) 用于调用HTTP请求 method: 请求的方式，get还是post（不区分大小写，一般用大写） ur

╰半橙微兮°/ 2024年02月17日 21:48/ 0 赞/ 19 阅读

相关基本的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 赞/ 82 阅读

相关 promise封装XMLHttpRequest请求，封装ajax

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></t

清疚/ 2023年01月16日 14:21/ 0 赞/ 144 阅读

相关 swagger添加token

文章目录基础版本添加注意: 完整的配置: 基础版本添加注意: 前面这一段 ParameterBuilder ticke

我不是女神ヾ/ 2023年01月07日 13:30/ 0 赞/ 128 阅读

相关 react前端XMLHttpRequest请求添加token

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

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

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

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

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

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

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

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

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

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

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

相关跨域 XMLHttpRequest 请求

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

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

相关 ajax实现请求头添加token

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

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