axios发送网络请求

用户国营  金牌会员 | 2024-9-27 05:38:42 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 757|帖子 757|积分 2271

本文包罗了常见的发送网络请求的方法
XMLHttpReqest

  2. <!DOCTYPE html>
  3. <html lang="en">
  5. <head>
  6.   <meta charset="UTF-8">
  7.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  8.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  9.   <title>案例_地区查询</title>
  10.   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
  11.   <style>
  12.     :root {
  13.       font-size: 15px;
  14.     }
  16.     body {
  17.       padding-top: 15px;
  18.     }
  19.   </style>
  20. </head>
  22. <body>
  23.   <div class="container">
  24.     <form id="editForm" class="row">
  25.       <!-- 输入省份名字 -->
  26.       <div class="mb-3 col">
  27.         <label class="form-label">省份名字</label>
  28.         <input type="text" value="北京" name="province" class="form-control province" placeholder="请输入省份名称" />
  29.       </div>
  30.       <!-- 输入城市名字 -->
  31.       <div class="mb-3 col">
  32.         <label class="form-label">城市名字</label>
  33.         <input type="text" value="北京市" name="city" class="form-control city" placeholder="请输入城市名称" />
  34.       </div>
  35.     </form>
  36.     <button type="button" class="btn btn-primary sel-btn">查询</button>
  37.     <br><br>
  38.     <p>地区列表: </p>
  39.     <ul class="list-group">
  40.       <!-- 示例地区 -->
  41.       <li class="list-group-item">东城区</li>
  42.     </ul>
  43.   </div>
  44.   <!-- <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> -->
  45.   <script>
  46.     /**
  47.      * 目标: 根据省份和城市名字, 查询对应的地区列表
  48.     */
  50.     document.querySelector('.sel-btn').addEventListener('click',()=>{
  51.         //收集省和市的值
  52.        const pname= document.querySelector('.province').value
  53.       const cname=  document.querySelector('.city').value
  55.         const obj={
  56.             pname,
  57.             cname
  58.         }
  59.         // URLSearchParams转化成查询参数
  60.         const paramsObj=new URLSearchParams(obj)
  61.         const queryString=paramsObj.toString()
  63.         //使用xhr来查询对像
  64.         const xhr=new XMLHttpRequest()
  65.         xhr.open('GET',`http://hmajax.itheima.net/api/area?${queryString}`)
  66.         xhr.addEventListener('loadend',()=>{
  67.             console.log(xhr.response)
  68.             const data=JSON.parse(xhr.response)
  69.          
  70.             const htmlStr=data.list.map(areaName=>{
  71.                 return ` <li class="list-group-item">${areaName}</li>`
  72.             }).join('')
  73.             document.querySelector('.list-group').innerHTML=htmlStr
  75.         })
  76.         xhr.send()
  77.         
  78.     })
  79.   </script>
  80. </body>
  82. </html>
复制代码
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7. </head>
  8. <body>
  9.     <button class="reg-btn">注册账号</button>
  10.     <style>
  11.         .reg-btn{
  12.             background-color: aquamarine;
  13.             font-size: 20px;
  14.             width: 120px;
  15.             height: auto;
  16.             border-radius: 20px;
  17.         }
  18.     </style>
  19.     <script>
  20.         document.querySelector('.reg-btn').addEventListener('click',()=>{
  21.             const xhr=new XMLHttpRequest()
  22.         xhr.open('POST','http://hmajax.itheima.net/api/register')
  23.         xhr.addEventListener('loadend',()=>{
  24.             console.log(xhr.response)
  25.         })
  27.         // 设置请求投-告诉服务器
  28.         xhr.setRequestHeader('Content-Type','application/json')
  29.         const useObj={
  30.             username:'itheima006',
  31.             password:'7654321'
  32.         }
  33.         const useStr=JSON.stringify(useObj)
  35.         //携带请求体数据
  36.         xhr.send(useStr)
  38.         })
  39.       
  41.     </script>
  42. </body>
  43. </html>
复制代码
promise

封装axios

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7. </head>
  8. <body>
  9.     <p class="my-p"></p>
  10.     <script>
  11.         function myaxios(object){
  12.            return new Promise((resolve,reject)=>{
  13.                 const xhr=new XMLHttpRequest()
  14.                 if(object.params){
  15.                     //支持参数传递
  16.                     const paramsObj=new URLSearchParams(object.params)
  17.                     const queryString=paramsObj.toString()
  18.                     //拼接参数
  19.                     object.url+=`?${queryString}`
  20.                 }
  21.                 xhr.open(object.method||'GET',object.url)
  22.                 xhr.addEventListener('loadend',()=>{
  23.                     if(xhr.status>=200&&xhr.status<300){
  24.                         resolve(JSON.parse(xhr.response))
  25.                     }
  26.                     else{
  27.                         reject(new Error(xhr.response))
  28.                     }
  29.                 })
  30.                
  31.             //判断是否有data，携带请求体
  32.             // if(object.data){
  33.             //     //转化数字类型，在send中发送
  35.             //     const jsonStr=JSON.stringify(object.data)
  36.             //     xhr.setRequestHeader('Content-Type','application/json')
  37.             //     xhr.send(jsonStr)
  39.             // }
  40.             //没有请求体
  41.                 xhr.send()
  43.             })
  45.         }
  46.         myaxios({
  47.             url:'http://hmajax.itheima.net/api/area',
  48.             method:'GET',
  49.             params:{
  50.                 pname:'北京',
  51.                 cname:'北京市'
  53.             },
  54.            
  55.             // data:{
  56.             //     username:'itheima005',
  57.             //     password:'565622'
  59.             // }
  60.             
  61.         }).then(result=>{
  62.             console.log(result)
  63.             document.querySelector('.my-p').innerHTML=result.list.join('<br>')
  64.         }).catch(error=>{
  65.             document.querySelector('.my-p').innerHTML=error.message
  66.             console.log(error)
  67.         })
  68.     </script>
  69. </body>
  70. </html>
复制代码
axios

async await

  2. <!DOCTYPE html>
  3. <html lang="en">
  5. <head>
  6.   <meta charset="UTF-8">
  7.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  8.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  9.   <title>async函数和await_解决回调函数地狱</title>
  10. </head>
  12. <body>
  13.   <form>
  14.     <span>省份：</span>
  15.     <select>
  16.       <option class="province"></option>
  17.     </select>
  18.     <span>城市：</span>
  19.     <select>
  20.       <option class="city"></option>
  21.     </select>
  22.     <span>地区：</span>
  23.     <select>
  24.       <option class="area"></option>
  25.     </select>
  26.   </form>
  27.   <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  28.   <script>
  29.     /**
  30.      * 目标：掌握async和await语法，解决回调函数地狱
  31.      * 概念：在async函数内，使用await关键字，获取Promise对象"成功状态"结果值
  32.      * 注意：await必须用在async修饰的函数内（await会阻止"异步函数内"代码继续执行，原地等待结果）
  33.     */
  34.    async function getDate() {
  35.     try{
  36.         const pObj=await  axios({
  37.         url:'http://hmajax.itheima.net/api/province',
  38.     })
  39.     const pname=pObj.data.list[0]
  40.     console.log(pname)
  41.   const cObj= await axios ({url:'http://hmajax.itheima.net/api/city',params:{pname}})
  42.   const cname=cObj.data.list[0]
  43.     console.log(pObj)
  44.     console.log(cname)
  46.     const areaObj=await axios({url:'http://hmajax.itheima.net/api/area',params:{pname,cname}})
  47.     const anaem=areaObj.data.list[0]
  48.     console.log(anaem)
  49.    
  50.     document.querySelector('.province').innerHTML=pname
  51.     document.querySelector('.city').innerHTML=cname
  52.     document.querySelector('.area').innerHTML=anaem
  54.     }catch(error){
  55.         console.dir(error)
  56.     }
  57.   
  58.    
  59.    }
  60.    getDate()
  61.   
  62.   </script>
  63. </body>
  65. </html>
复制代码
提交图片案例

  2. <!DOCTYPE html>
  3. <html lang="en">
  5. <head>
  6.   <meta charset="UTF-8">
  7.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  8.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  9.   <title>图片上传</title>
  10. </head>
  12. <body>
  13.   <!-- 文件选择元素 -->
  14.   <input type="file" class="upload">
  15.   <img src="" alt="" class="my-img">
  17.   <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  18.   <script>
  19.     /**
  20.      * 目标：图片上传，显示到网页上
  21.      *  1. 获取图片文件
  22.      *  2. 使用 FormData 携带图片文件
  23.      *  3. 提交到服务器，获取图片url网址使用
  24.     */
  25.     document.querySelector('.upload').addEventListener('change',e=>{
  26.         console.log(e.target.files[0])
  28.         //使用formDate携带文件
  29.         const fd=new FormData()
  30.         fd.append('img',e.target.files[0])
  32.         //axios提交到服务器
  33.         axios({
  34.             url:'http://hmajax.itheima.net/api/uploadimg',
  35.             method:'POST',
  36.             data:fd
  37.             
  38.         }).then(result=>{
  39.             const myimg=result.data.data.url
  40.             document.querySelector('.my-img').src=myimg
  41.         })
  44.     })
  45.   </script>
  46. </body>
  48. </html>
复制代码
axios请求拦截器和响应拦截器

  1. import axios from 'axios'
  2. import { useUserStore } from '@/stores/userStore'
  3. import router from '@/router'
  5. const httpInstance=axios.create({
  6.     baseURL:'http://pcapi-xiaotuxian-front-devtest.itheima.net',
  7.     timeout:10000
  8. })
  10. //拦截器
  11. //axios拦截器
  12. httpInstance.interceptors.request.use(config=>{
  13.    
  14.     //从pinia获取token数据
  15.     const userStore=useUserStore()
  16.     //按照后端的要求拼接token数据
  17.     const token=userStore.userInfo.token
  18.     if(token){
  19.         config.headers.Authorization=`Bearer ${token}`
  20.     }
  21.     return config
  22. },e=>Promise.reject(e))
  24. //axios响应式拦截器
  25. httpInstance.interceptors.response.use(res=>res.data,e=>{
  26.     //错误提示
  27.     ElMessage({
  28.         type:'warning',
  29.         message:e.response.data.message
  30.     })
  32.     //401token失效处理
  33.     //清除本地用户数据
  34.     //跳转到登录页
  35.     const userStore=useUserStore()
  36.     if(e.response.status===401){
  37.         userStore.clearUserInfo()
  38.         router.push('/login')
  40.     }
  41.     return Promise.reject(e)
  42. })
  44. export default httpInstance
复制代码
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
回复

使用道具 举报

0 个回复

倒序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

用户国营

金牌会员
这个人很懒什么都没写!

楼主热帖

标签云

挺好的 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表