axios 下载的文件无法打开安装axios失败

转载

数据小探 2024-08-20 13:34:47

文章标签 axios 下载的文件无法打开前端 ajax javascript vue.js 文章分类 iOS 移动开发

axios官网文档：axios中文文档|axios中文网 | axios

axios(阿克休斯) 官网 : axios中文网|axios API 中文文档 | axios

axios是什么：一个js框架，用于发送ajax请求（底层使用XMLHttpRequest）

axios基本语法

axios语法 :

axios
         .get('url')
         .then( res=>{ //请求成功  res.data 服务器响应数据 } )
         .catch( err=>{ //请求失败 err"错误信息} )
         .then( ()=>{ //本次请求完成 无论成功和失败都会执行 } )

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>

  <body>
    <button class="btn1">基本使用</button>
    <button class="btn2">点我发送get请求</button>
    <button class="btn3">点我发送post请求</button>

    <!-- 导入axios -->
    <script src="./axios.js"></script>

    <script>
      /* 
      axios语法 :
        axios
         .get('url')
         .then( res=>{ //请求成功  res.data 服务器响应数据 } )
         .catch( err=>{ //请求失败 err"错误信息} )
         .then( ()=>{ //本次请求完成 无论成功和失败都会执行 } )
      */
// 基本用法
document.querySelector('.btn1').addEventListener('click',function(){
  // 为给定id的user创建请求
  axios.get('https://autumnfish.cn/api/joke/list?num=10')
       .then(res =>{
        //  res是axios自己包装的一个对象,里面包含数据响应,配置信息,请求头等数据
        console.log(res);
        // res.data:服务器响应数据
        console.log(res.data);
       })
       .catch(err=>{
        // 请求失败 
         console.log(err);
       })
       .then(()=>{
        //  本次请求完成:无论成功还是失败都会执行
        console.log('本次请求完成');
       })
})

// 2.点我发送get请求
 //get方法第一个参数是url
        //get方法第二个参数是对象类型  { params:{get参数对象}  }
document.querySelector('.btn2').addEventListener('click',function(){
  axios.get('https://autumnfish.cn/api/joke/list',{
    params:{
      num:10
      }
  }).then(res=>{
    console.log(res);
  }) 
  })

      //点我发送get请求
      // document.querySelector(".btn2").onclick = function() {
      //   axios.get('https://autumnfish.cn/api/joke/list',{
      //     params:{ num:10 }
      //   })
      //   .then(res=>{ 
      //     console.log(res)
      //   })
      // }

      //点我发送post请求
  //post方法第一个参数是url
        //post方法第二个参数是对象类型  { post参数对象  }
      document.querySelector(".btn3").onclick = function() {
        axios.post('http://www.liulongbin.top:3009/api/login',{
          username:'sfs',
          password:'adada'
        }).then(res=>{
          console.log( res )
        })
      }
    </script>
  </body>
</html>

axios推荐使用方式

基本使用方法

(2)介绍第三种使用方式

axios({
                     url:'请求路径',
                     method:'请求方式',
                     data:{ post请求参数 },
                     params:{ get请求参数 }
                 }).then(res=>{
                     //成功回调
                     //console.log(res)
                 });

2.ul跳转传参原理

原理1 : 给button标签 注册一个行内事件

<button onclick="事件处理代码"></button>

原理2：通过拼接url实现跳转传参

location.href = url?key=value
网页跳转由路径决定，无论你后面拼接什么参数，都会跳转

axios 下载的文件无法打开安装axios失败_前端

原理3 ：切割url的search参数，得到从其他页面传递过来的参数

let id = location.search.split('=')[1]

axios 下载的文件无法打开安装axios失败_axios 下载的文件无法打开_02

水果案例

水果列表页

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./css/inputnumber.css" />
    <link rel="stylesheet" href="./css/index.css" />
    <title>水果列表</title>
  </head>

  <body>
    <div class="app-container" id="app">
      <!-- 顶部banner -->
      <div class="banner-box"><img src="./img/fruit.jpg" alt="" /></div>
      <!-- 面包屑 -->
      <div class="breadcrumb">
        <span>🏠</span>
        /
        <span>水果列表</span>
      </div>
      <!-- table -->
      <div class="main">
        <div class="table">
          <!-- 头部 -->
          <div class="thead">
            <div class="tr">
              <div class="th">名字</div>
              <div class="th">图片</div>
              <div class="th">简介</div>
              <div class="th">操作</div>
            </div>
          </div>
          <div class="tbody">
            <div class="tr">
              <div class="td">火龙果</div>
              <div class="td">
                <img alt="" src="./img/火龙果.png" />
              </div>
              <div class="td">
                <span class="my-input__inner count">一种好吃的水果</span>
              </div>
              <div class="td">
                <button class="info">查看详情</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 导入axios -->
    <script src="./lib/axios.js"></script>

    <script>
      /* url路径传参的流程总结   A页面 跳转到 B页面
      1. 给按钮添加行内js跳转  (动态新增按钮不能直接获取，但是可以注册行内事件)
      2. 在url路径的后面拼接你的参数 ( 页面跳转只由路径决定， 参数影响跳转)
        <button onclick=" location.href= ' url?id=参数值 ' "></button>
      3. 在B页面解析location.search参数
        let id = location/search.split('=')[1]
      */

       //1.页面一进来，发送ajax请求水果列表

       axios({
         url:'https://autumnfish.cn/fruitApi/fruits',
         method:'get',
         
       }).then(res=>{
         //成功回调
         console.log(res)
         renderData(res.data.data)
       })

    // 渲染数据
    const renderData=arr=>{
      document.querySelector('.tbody').innerHTML=arr.map(item=>`
      <div class="tr">
              <div class="td">${item.name}</div>
              <div class="td">
                <img alt="" src="${item.icon}" />
              </div>
              <div class="td">
                <span class="my-input__inner count">${item.info}</span>
              </div>
              <div class="td">
                <button class="info" onclick="location.href='./detail.html?id=${item.id}'">查看详情</button>
              </div>
            </div>
      `).join('')
    }


//         axios({
//           url:'https://autumnfish.cn/fruitApi/fruits',
//           method:'get',
         
//         }).then(res=>{
//           //成功回调
//           console.log(res)
//           // 渲染页面
//           readerData(res.data.data)
//         })

// // 渲染数据
// const readerData=arr=>{
//   document.querySelector('.tbody').innerHTML=arr.map(item=>`
//   <div class="tr">
//               <div class="td">${item.name}</div>
//               <div class="td">
//                 <img alt="" src="${item.icon}" />
//               </div>
//               <div class="td">
//                 <span class="my-input__inner count">${item.info}</span>
//               </div>
//               <div class="td">
//                 <button class="info" onclick="location.href='./detail.html?id=${item.id}'">查看详情</button>
//               </div>
//             </div>
               
//   `).join('')
//   // A水果列表页.注册行内事件.设置跳转路径,把参数放在url中传参
// }

       /* 动态新增的元素，无法直接注册事件的。 解决方案有两种
       1.最常用 ： 事件委托技术
       2.偶尔用 ： 行内式js注册事件  (事件处理只有1行代码)
          <div onclick=" 事件处理代码 "></div>
       */

       
       
       
       
    </script>
    
  </body>
</html>

水果详情页面

//1.获取从其他页面传递过来的参数id
/*
***1.url跳转传参原理 :url跳转路径决定 ,参数search不影响跳转
A->B
A <button οnclick="location.href='url?参数名=参数值'">按钮</button>
B :获取参数 location.search.split('=')[1]
***2.get请求参数可以简写

标准get参数 : http://路径?参数名=参数值
简写get参数: http://路径/参数值

*/

// B:水果详情页获取从A页面传递过来的参数id

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      * {
        padding: 0;
        margin: 0;
        list-style: none;
      }
      .info {
        display: inline-block;
        flex: 1;
        height: 100%;
        color: #000;
        text-align: center;
      }

      .info .story h5 {
        margin-top: 10px;
      }

      .info .story p {
        padding: 30px 50px;
        text-align: left;
        line-height: 30px;
        font-weight: 500;
        text-indent: 2em;
      }

      .name {
        text-align: center;
        line-height: 30px;
        border-bottom: 1px solid #ccc;
        font-weight: bold;
        margin-top: 15px;
      }

      .img {
        margin: 15px 0;
        text-align: center;
        max-height: 45%;
        overflow: hidden;
        /* 伸缩盒子实现图片居中 */
        display: flex;
        align-items: center;
        justify-content: center;
        vertical-align: middle;
      }

      .img > img {
        width: 120px;
        height: 120px;
        object-fit: cover;
      }

      h5 {
        font-size: 18px;
      }
    </style>
  </head>
  <body>
    <div class="info">
      <div class="bg">
        <div class="name" style="color:red">水果名称:桃子</div>
        <div class="img">
          <img
            src="./img/火龙果.png"
            alt=""
          />
        </div>
        <p style="color:red">水果信息：蔷薇目蔷薇科植物</p>
        <div class="story">
          <h5>详细介绍：</h5>
          <p>
            桃（学名：Amygdalus persica
            L.）：蔷薇科、桃属植物。落叶小乔木；叶为窄椭圆形至披针形，长15厘米，宽4厘米，先端成长而细的尖端，边缘有细齿，暗绿色有光泽，叶基具有蜜腺；树皮暗灰色，随年龄增长出现裂缝；花单生，从淡至深粉红或红色，有时为白色，有短柄，直径4厘米，早春开花；近球形核果，表面有毛茸，肉质可食，为橙黄色泛红色，直径7.5厘米，有带深麻点和沟纹的核，内含白色种子。
            是一种果实作为水果的落叶小乔木，花可以观赏，果实多汁，可以生食或制桃脯、罐头等，核仁也可以食用。果肉有白色和黄色的，桃有多种品种，一般果皮有毛，“油桃”的果皮光滑；“蟠桃”果实是扁盘状；“碧桃”是观赏花用桃树，有多种形式的花瓣。
            原产中国，各省区广泛栽培。世界各地均有栽植。
          </p>
        </div>
      </div>
    </div>

    <!-- 导入axios -->
    <script src="./lib/axios.js"></script>
    <script>
      //1.获取从其他页面传递过来的参数id
      /*
       ***1.url跳转传参原理 :url跳转路径决定 ,参数search不影响跳转
       A->B 
       A <button onclick="location.href='url?参数名=参数值'">按钮</button>
       B :获取参数 location.search.split('=')[1]
      ***2.get请求参数可以简写 
   
      标准get参数 : http://路径?参数名=参数值
      简写get参数:  http://路径/参数值
        
      */

      // B:水果详情页 获取从A页面传递过来的参数id
      let id = location.search.split('=')[1]
      console.log(id)

      //2.ajax请求水果详情
   axios({
     url: ` https://autumnfish.cn/fruitApi/fruit/${id}`,
     method:'get',
    
   }).then(res=>{
     //成功回调
     console.log(res)
     renderData(res.data.data)
     console.log(res.data.data);
   })
  /* 封装渲染函数 */
  /* 封装渲染函数 */
  
 const renderData=arr=>{
   document.querySelector('.bg').innerHTML=`
   <div class="name" style="color:red">水果名称:${arr.name}</div>
        <div class="img">
          <img
            src="${arr.icon}"
            alt=""
          />
        </div>
        <p style="color:red">水果信息：${arr.info}</p>
        <div class="story">
          <h5>详细介绍：</h5>
          <p>
            ${arr.desc}
          </p>
        </div>
   `
 }

    </script>
    
  </body>
</html>

2.2 自动滚到最底部

resetui()

语音聊天案例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="css/reset.css" />
    <link rel="stylesheet" href="css/main.css" />
    <script type="text/javascript" src="./lib/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="./lib/jquery-ui.min.js"></script>
    <script type="text/javascript" src="./lib/jquery.mousewheel.js"></script>
    <script type="text/javascript" src="./lib/scroll.js"></script>
    <title>聊天机器人</title>
  </head>

  <body>
    <div class="wrap">
      <!-- 头部 Header 区域 -->
      <div class="header">
        <h3>小思同学</h3>
        <img src="img/person01.png" alt="icon" />
      </div>
      <!-- 中间 聊天内容区域 -->
      <div class="main">
        <ul class="talk_list" style="top: 0px;">
          <li class="left_word">
            <img src="img/person01.png" />
            <span>你好</span>
          </li>
          <!-- <li class="right_word">
					<img src="img/person02.png" />
					<span>你好哦</span>
				</li> -->
        </ul>
        <!-- 右侧滚动条 -->
        <div class="drag_bar" style="display: none;">
          <div
            class="drager ui-draggable ui-draggable-handle"
            style="display: none; height: 412.628px;"
          ></div>
        </div>
      </div>
      <!-- 底部 消息编辑区域 -->
      <div class="footer">
        <img src="img/person02.png" alt="icon" />
        <input type="text" placeholder="说的什么吧..." class="input_txt" />
        <input type="button" value="发 送" class="input_sub" />
      </div>
    </div>
<audio src="" autoplay></audio>
    <!-- 导入axios -->
    <script src="./lib/axios.js"></script>
    <script>
      
      /* 本案例特点
      1.并不是所有需要渲染的数据都是来源于服务器 ： 我的聊天内容也要渲染
      2.并不是所有的渲染都是替换 innerHTML : 这个案例在后面拼接
      */

      /*
      使用数据驱动思路 
      (1) 声明全局数组,用于存储聊天
      (2)将自己的聊天内容 与机器人的聊天内容添加到数组中
      (3)渲染数组

      文字转语音思路
      (1) 给页面新增一个audio标签
      (2)发送ajax,将机器人的文字转语音url
      (3)服务器响应语音url之后,设置给audio标签的src属性
      */

    //  声明全局数组,用于存储聊天列表
    let arr=[]
document.querySelector('.input_sub').addEventListener('click',function(){
  let spoken=document.querySelector('.input_txt').value
  if(spoken==''){
   return alert('请您输入内容')
  }
  // 1.3 把自己的聊天内容添加到数组中
  arr.push({
    text:spoken,
    isMe:true
  })
 renderData(arr)
// 自动滚到最底部
resetui()

// 1.4ajax发送请求
axios({
  url:'http://www.liulongbin.top:3006/api/robot',
  method:'get',
  
  params: { spoken}
}).then(res=>{
  //成功回调
  console.log(res)
  console.log(res.data.data.info.text);
  // 1.5服务器响应之后渲染机器人聊天儿内容
// 渲染数据
 arr.push({
   text:res.data.data.info.text,
   isMe:false
 })
 renderData(arr)
//  文字转语音
getVoice(res.data.data.info.text)
//  自动滚动到底部
       resetui()
      //  1.6 清空表单
      document.querySelector('.input_txt').value=''
})

})

// 封装文字转语音
const getVoice=text=>{
  axios({
    url:'http://www.liulongbin.top:3006/api/synthesize',
    method:'get',
    
    params: { text}
  }).then(res=>{
    //成功回调
    console.log(res)
    // 服务器响应语音url之后,设置给audio标签的src属性
    document.querySelector('audio').src=res.data.voiceUrl
  })
}
// 封装渲染数据
const renderData=arr=>{
  document.querySelector('.talk_list').innerHTML=arr.map(item=>
  
  item.isMe? `<li class="right_word">
					<img src="img/person02.png" />
					<span>${item.text}</span>
				</li>`:
  `<li class="left_word">
					<img src="img/person01.png" />
					<span>${item.text}</span>
				</li>`).join('')
}

    </script>
  </body>
</html>

***tab栏切换案例

1.点击每一个tab栏里元素,切换功能
1.1 排他修改样式
1.2 获取点击span标签文本
1.3发送ajax请求
1.4服务器响应后,渲染数据
2.网络请求loading效果
loading原理 GIF动图
显示loading :ajax发送之前
消失loading :服务器响应之后

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <link rel="stylesheet" href="./css/index.css" />
  </head>

  <body>
    <img src="./img/header.png" alt="" class="header" />
    <div class="cq-wrap">
      <!-- 导航 -->
      <div class="nav">
        <ul>
          <li class="active">
            <img src="./img/sword.png" alt="" /><span>剑士</span>
          </li>
          <li><img src="./img/knight.png" alt="" /> <span>骑士</span></li>
          <li><img src="./img/Archer.png" alt="" /> <span>弓手</span></li>
          <li><img src="./img/hunter.png" alt="" /> <span>猎人</span></li>
          <li><img src="./img/magic.png" alt="" /> <span>法师</span></li>
          <li><img src="./img/flamen.png" alt="" /> <span>祭司</span></li>
        </ul>
      </div>
      <!-- table -->
      <table class="cq-list">
        <thead>
          <th>勇士</th>
          <th>技能</th>
          <th>武器</th>
        </thead>
        <tbody>
          <tr>
            <td>
              <img
                class="icon"
                src="http://p6.qhimg.com/dr/72__/t01b8063ea608652431.png"
                alt=""
              />
              <span>
                涅斯军长官尤莉娅
              </span>
            </td>
            <td>
              <img
                class="skill"
                src="http://p9.qhimg.com/dr/52__/t01087d8e61575ab25d.png"
                alt=""
              />
              注射!
            </td>
            <td>
              <img
                class="weapon"
                src="http://p6.qhimg.com/dr/45__/t0178ac936dcb72650f.png"
                alt=""
              />
              疫苗-G
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <!-- 遮罩层 -->
    <div class="cover" style="display: none">
      <img class="loading" src="./img/loading01.gif" alt="" />
    </div>

    <!-- 导入axios -->
    <script src="./lib/axios.js"></script>
    <script>
      /* 思路分析
      1.点击每一个tab栏里元素,切换功能
      1.1 排他修改样式
      1.2 获取点击span标签文本
      1.3发送ajax请求
      1.4服务器响应后,渲染数据

      2.网络请求loading效果
      loading原理 GIF动图 
      显示loading :ajax发送之前
      消失loading :服务器响应之后
      */



//      let lis=document.querySelectorAll('.nav li')
//     //  循环遍历加点击事件
//     // for(let i = 0;i<lis.length;i++){
//     //   lis[i].onclick=function(){
//     //     document.querySelector('.active').classList.remove('active')
//     //   this.classList.add('active')
//     //   }

//     // }
lis.forEach(item=>{
  item.addEventListener('click',function(){
    document.querySelector('.active').classList.remove('active')
      this.classList.add('active')
      // 获取span文字
      let type=item.children[1].innerHTML
      console.log(type);

      // 1.3发送ajax请求
      // 显示loading
      document.querySelector('.cover').style.display='block'
      axios({
        url:'https://autumnfish.cn/api/cq/category',
        method:'get',
        
        params: { type}
      }).then(res=>{
        //成功回调
        console.log(res)
        // 渲染数据
        renderData(res.data.data.heros)
        // 消失loading :服务器响应之后
        document.querySelector('.cover').style.display='none'
      })
  })
})
/* 
页面一加载默认,默认请求第一个英雄数据
(1)事件处理函数有两种触发方式
 第一种 交互触发 用户主动点击
 第二种 程序触发  元素.click()
 (2)document.querySelector() 默认选中第一个元素
*/
// 主动触发第一个li 事件
document.querySelector('.nav li').click()

// 封装渲染数据

const renderData=arr=>{
  document.querySelector('tbody').innerHTML=arr.map(item=>`<tr>
            <td>
              <img
                class="icon"
                src="${item.heroIcon}"
                alt=""
              />
              <span>
                ${item.heroName}
              </span>
            </td>
            <td>
              <img
                class="skill"
                src="${item.skillIcon}"
                alt=""
              />
              ${item.skillName}
            </td>
            <td>
              <img
                class="weapon"
                src="${item.weaponIcon}"
                alt=""
              />
              ${item.weaponName}
            </td>
          </tr>`).join('')
}



    </script>
    
  </body>
</html>

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。