异步函数

//ajax是异步函数(网络请求花费时间，然而代码不等待直接往下执行 ) // async(声明一个异步函数) 与 await(等待结果) 是一组结构

 

1.用setup（）方法获取当前地址栏里的id，

const route = useRoute(); //当前组件的路由信息对象

export default {
        name: "listView",
        setup() {
            const route = useRoute();
            //当前组件的路由信息对象
            //ajax是异步函数(网络请求花费时间，然而代码不等待直接往下执行 )
            // async(声明一个异步函数)    await(等待结果)  是一组结构
​
            onMounted(//view与model绑定
                async () =>{
                    let id = route.query.id;
                    console.log(id);
                    let res=await getPlaylistDetail(id);
                    console.log(res);
                })
        }
    }

 

2.引用

 import {useRoute} from 'vue-router'

 

怎么实现点击哪个跳转到到对应的歌单列表并获取到指定页面的内容？

思路：1.打开网易云 找到歌单列表的接口

2.src的api/index.js 封装接口

//获取歌单详情的api  /playlist/detail?id=24381616  id:当前歌单的详情
​
export function getPlaylistDetail(id) {
    return axios.get(`${baseUrl}/playlist/detail?id=${id}`)
}
​

 

3.在listView.vue中

 import {getPlaylistDetail} from '@/api/index.js'

 

4.渲染与抛出