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