vue3发送请求（Vue3【Axios网络请求（GET、POST 、并发请求、全局配置 ）】(八)-全面详解（学习总结—从入门到深化））

👏作者简介：大家好    
    
    
  ，我是小童  


     


     


     
，Java开发工程师


 




 




 




，CSDN博客博主   

   

   

 ，Java领域新星创作者

📕系列专栏：前端 
    
    
    
、Java
     


     


     


  、Java中间件大全 




 




 




 
、微信小程序 

   

   

   

、微信支付
     

     

     

 、若依框架  




  




  




  、Spring全家桶

📧如果文章知识点有错误的地方   

     

     

     ，请指正！和大家一起学习



  




  




  




，一起进步👀

🔥如果感觉博主的文章还不错的话  


  


  


，请👍三连支持👍一下博主哦

🍂博主正在努力完成2023计划中：以梦为马    
     
     
     ，扬帆起航




   




   




   



，2023追梦人 

目录

​Axios网络请求_GET

Axios网络请求_POST 

Axios网络请求_并发请求

Axios网络请求_全局配置 

Axios网络请求_GET

Axios 是一个基于 promise 的 HTTP 库 



 



 



，可以用在浏览器和 node.js 中

安装Axios 

npm install --save axios

GET请求

<template> <h3>网络请求</h3> <ul> <li v-for="item in bannerObj.banner" :key="item"> <h3>{{ item.title }}</h3> <p>{{ item.content }}</p> </li> </ul> </template> <script setup> import { onMounted,reactive } from "vue" import axios from "axios" const bannerObj = reactive({ banner:{} }) onMounted(() =>{ axios.get("http://iwenwiki.com/api/blueberrypai/getIndexBanner.php") .then(res =>{ bannerObj.banner = res.data.banner }) .catch(error =>{ console.log(error) }) }) </script>

带参数GET请求

<template> <h3>网络请求</h3> <div> <h3>{{ music.songInfo.song_title }}</h3> <p>{{ music.songInfo.song_intro_cont }}</p> </div> </template> <script setup> import { onMounted,reactive } from "vue" import axios from "axios" const music = reactive({ songInfo:{} }) onMounted(() =>{ axios.get("http://iwenwiki.com/api/blueberrypai/getSongInfo.php?song=mo") .then(res =>{ music.songInfo = res.data.songInfo }) .catch(error =>{ console.log(error); }) }) </script> axios.get("http://iwenwiki.com/api/blueberrypai/getSongInfo.php",{ params:{ song:"mo" } })

实时效果反馈

1.下列代码                   ，画横线处应该填写的代码是：

<script setup> import { onMounted,reactive } from "vue" import axios from "axios" const music = reactive({ songInfo:{} }) onMounted(() =>{ ___.get("http://iwenwiki.com/api/blueberrypai/getSongInfo.php?song=mo") .then(res =>{ music.songInfo = res.data.songInfo }) .catch(error =>{ console.log(error); }) }) </script>

A axios

B fetch

C ajax

D XHR

Axios网络请求_POST 

安装依赖 

axios POST接收的网络请求参数需要进行格式转化

需求的格式 username=iwen

npm install --save querystring <template> <h3>网络请求_POST</h3> </template> <script setup> import { onMounted } from "vue" import axios from "axios" import qs from "querystring" onMounted(() =>{ axios.post("http://iwenwiki.com/api/blueberrypai/login.php",qs.stringify({ user_id:"iwen@qq.com", password:"iwen123", verification_code:"crfvw" })) .then(res =>{ console.log(res.data); }) .catch(error =>{ console.log(error); }) }) </script>

Axios网络请求_并发请求

在真实场景中




    




    




    


，有可能会需要一次性获取多个网络请求的结果

处理并发请求的助手函数 

<template> <h3>网络请求_合并并发请求</h3> </template> <script setup> import { onMounted } from "vue" import axios from "axios" function getBanner(){ return axios.get("http://iwenwiki.com/api/blueberrypai/getIndexBanner.php") } function getChating(){ return axios.get("http://iwenwiki.com/api/blueberrypai/getIndexChating.php") } onMounted(() =>{ axios.all([getBanner(), getChating()]) .then(axios.spread((banner,chating) =>{ console.log(banner.data,chating.data); })) }) </script>

 实时效果反馈

1.下列代码















，画横线处应该填写的代码是：

<template> <h3>网络请求_合并并发请求</h3> </template> <script setup> import { onMounted } from "vue" import axios from "axios" function getBanner(){ return axios.get("http://iwenwiki.com/api/blueberrypai/getIndexBanner.php") } function getChating(){ return axios.get("http://iwenwiki.com/api/blueberrypai/getIndexChating.php") } onMounted(() =>{ axios.all([getBanner(), getChating()]) .then(axios.___((banner,chating) =>{ console.log(banner.data,chating.data); })) }) </script>

A axios

B fetch

C all

D spread

Axios网络请求_全局配置 

全局引入 axios 应用会更加方便 

全局引用方案一

vue的全局处理方案 app.config.globalProperties 可以实现

import { createApp } from vue import App from ./App.vue import axios from "axios" const app = createApp(App) app.config.globalProperties.$axios = axios app.mount(#app) <template> <h3>网络请求</h3> <ul> <li v-for="item in fingerUnion.data" :key="item"> <h3>{{ item.title }}</h3> <p>{{ item.content }}</p> </li> </ul> </template> <script setup> import { onMounted,reactive,getCurrentInstance } from "vue" const { proxy } = getCurrentInstance(); const fingerUnion = reactive({ data:{} }) onMounted(() =>{ proxy.$axios.get("http://iwenwiki.com/api/blueberrypai/getIndexBanner.php") .then(res =>{ fingerUnion.data = res.data.banner }) }) </script>

全局引用方案二

利用依赖注入                  ，利用 Provide 和 Inject

import { createApp } from vue import App from ./App.vue import axios from "axios" const app = createApp(App) app.provide("axios",axios) app.mount(#app) <template> <h3>网络请求</h3> <ul> <li v-for="item in fingerUnion.data" :key="item"> <h3>{{ item.title }}</h3> <p>{{ item.content }}</p> </li> </ul> </template> <script setup> import { onMounted,reactive,inject } from "vue" const axios = inject("axios") const fingerUnion = reactive({ data:{} }) onMounted(() =>{ axios.get("http://iwenwiki.com/api/blueberrypai/getIndexBanner.php") .then(res =>{ fingerUnion.data = res.data.banner }) }) </script>

实时效果反馈

1.下列代码 



     



     



     

，画横线处应该填写的代码是：

<template> <h3>网络请求</h3> <ul> <li v-for="item in fingerUnion.data" :key="item"> <h3>{{ item.title }}</h3> <p>{{ item.content }}</p> </li> </ul> </template> <script setup> import { onMounted,reactive,inject } from "vue" const axios = ___("axios") const fingerUnion = reactive({ data:{} }) onMounted(() =>{ axios.get("http://iwenwiki.com/api/blueberrypai/getIndexBanner.php") .then(res =>{ fingerUnion.data = res.data.banner }) }) </script>

A axios

B provide

C inject

D spread