作者简介：大家好，我是小童，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请求

网络请求
  • {{ item.title }}
    {{ item.content }}
    •  
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) })})

带参数GET请求

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

实时效果反馈

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

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); })})

A axios

B fetch

C ajax

D XHR

Axios网络请求_POST

安装依赖

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

需求的格式 username=iwen

npm install --save querystring
网络请求_POST
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); })})

Axios网络请求_并发请求

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

处理并发请求的助手函数

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

实时效果反馈

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

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

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 = axiosapp.mount('#app')
网络请求
  • {{ item.title }}
    {{ item.content }}
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 })})

全局引用方案二

利用依赖注入，利用 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')
网络请求
  • {{ item.title }}
    {{ item.content }}
 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 })})

实时效果反馈

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

网络请求
  • {{ item.title }}
    {{ item.content }}
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 })})

A axios

B provide

C inject

D spread