Axios网络请求_GET

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中

安装Axios

npm install --save axios

GET请求

xxxxxxxxxx
<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请求

xxxxxxxxxx
<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>

xxxxxxxxxx
axios.get("http://iwenwiki.com/api/blueberrypai/getSongInfo.php",{
    params:{
        song:"mo"
    }
})

实时效果反馈

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

xxxxxxxxxx
<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

答案

1=>A