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

时间:2021-10-28 01:17:16


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

????作者简介:大家好,我是小童,Java开发工程师,博客博主,Java领域新星创作者
????系列专栏:前端、Java、Java中间件大全、微信小程序、微信支付、若依框架、Spring全家桶
????如果文章知识点有错误的地方,请指正!和大家一起学习,一起进步????
????如果感觉博主的文章还不错的话,请????三连支持????一下博主哦
????博主正在努力完成2023计划中:以梦为马,扬帆起航,2023追梦人 

目录

Axios网络请求_GET

Axios网络请求_POST 

Axios网络请求_并发请求

Axios网络请求_全局配置 


Axios网络请求_GET

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

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 

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

安装依赖 

axios

需求的格式 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网络请求_并发请求

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

在真实场景中,有可能会需要一次性获取多个网络请求的结果

处理并发请求的助手函数 

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

<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网络请求_全局配置 

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

全局引入 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