axios请求方法以及下载到本地的方法

最新推荐文章于 2024-08-13 15:51:57 发布

逐渐秃头的女子

最新推荐文章于 2024-08-13 15:51:57 发布

阅读量844

点赞数

文章标签： javascript 前端

本文链接：https://blog.csdn.net/qq_43714712/article/details/131533190

版权

文章介绍了在前端开发中如何使用axios进行GET和POST请求，包括对象转字符串处理GET请求参数，使用formData处理POST请求中的密码加密（MD5）及大小写转换。此外，还展示了计算文件大小的函数以及针对不同浏览器的文件下载方法。

摘要由CSDN通过智能技术生成

方法合集

1. axios get类型对象-》字符串
为什么传递的时候不直接字符串？原因：1个的参数还好说，多个的这样写就很不方便。对象的形式会好操作很多

//对象转字符串（axios需要字符串-》对象转成axios需要参数的字符串）
function createQuerystr (option) {//option是一个对象
      var queryStrArr = []
      for (var key in option) {
        if (typeof option[key] === 'object') {//键值是对象
          var k = JSON.stringify(option[key])
          var str = `${key}=${k}`
          queryStrArr.push(str)
        } else {
          var objStr = `${key}=${option[key]}`
          queryStrArr.push(objStr)
        }
      }
      var queryStr = queryStrArr.join('&')
      return queryStr//返回的字符串
    }
    //例子：
      baseInfoList (str) { // 所以get的axiso请求可以这样写
    return axios({
      url: api.system  + '/info/list'+'?'+createQuerystr(str),
      method: 'get'
    })
      }

2. post请求formData方式且密码加密md5
何时使用
·看到这种形式的，且url地址不加参数的且是post请求的，就是这种传参 在这里插入图片描述

 function login (data) {
  data.password = md5(data.password)
  var pwd = data.password.toUpperCase();//字母变大写
  
 let form = new FormData();//生成formData对象
  form.append('userName', data.username);//给对象添加属性
  form.append('pwd', pwd)
  
  return axios({
    url: api.authurl + api.loginApi + '/Login',
    data: form,//formData对象
    method: 'POST',
  })
}

3.计算文件大小

  computeFileSize(bytes = 0) {
    if (bytes === 0 || bytes === null) return '0 B'
    var k = 1024 // or 1024
    var sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
    var i = Math.floor(Math.log(bytes) / Math.log(k))
    return (bytes / Math.pow(k, i)).toPrecision(3) + ' ' + sizes[i]
    // toPrecision 把数字长度转化为指定长度；
    // Math.log(bytes) 对数 ln(bytes)
  },

4. 下载文件到本地

  function  downloadUpload (url) {
        if ((/Trident\/7\./).test(navigator.userAgent) || (/Trident\/6\./).test(navigator.userAgent)) {
        // IE10/IE11
          var aLink = document.createElement('a')
          aLink.className = 'download_link'
          var text = document.createTextNode('&nbsp;')
          aLink.appendChild(text)
          aLink.href = url
          aLink.click()
        } else { // Chrome,Firefox
          var iframe = document.createElement('iframe')
          iframe.src = url
          iframe.style = 'display:none'
          document.body.appendChild(iframe)
        }
      }
  }

//使用
let url =window.g.url_censysAnalysis_sqlresult+'?sql='+this.formInline.sql;//后端传递的地址
      downloadUpload(url)//就会下载到本地了