vue10----axios拦截器、js-base64歌词解码、lyric-parser解析歌词、watch的用法：当data中的值发生变化时触发、播放和暂停歌词，点击进度条跳转到对应歌词

2022-06-08 02:42:59

### axios Interceptors（拦截器）（P-lyric.vue）

类似于node中的中间件，在请求和响应之间做一次处理。

axios从接收到数据请求到then之间的过程中，拦截器进行拦截。正常的axios请求返回的response对象里有：data、status、statusText、headers、config、request、__propto__，可以通过响应拦截，只返回data。请求拦截可以对config中的参数进行修改，这里对url进行追加参数。

步骤：

①在utils文件夹下新建axios.js：

            import axios from "axios";
            // 请求拦截器
            axios.interceptors.request.use(function (config) {
                console.log("请求拦截器",config)
                // config.url=`/lyric/music/api/lyric?g_tk=1928093487&inCharset=utf-8&outCharset=utf-8&notice=0&format=json&songmid=001Qu4I30eVFYb&platform=yqq&hostUin=0&needNewCode=0&categoryId=10000000&pcachetime=1581573879680&name=wql&age=24`;// 增加&name=wql&age=24
                return config;
            }, function (error) {
                return Promise.reject(error);
            });

            // 响应拦截器
            axios.interceptors.response.use(function (response) {
                console.log("响应拦截器", response)
                return response.data;// 这里return出去的是 .then() 中的数据，这里只要data
            }, function (error) {
                return Promise.reject(error);
            });

            export default axios;

②main.js中引入带有拦截器的axios：

            import Axios from "axios";

替换为

            import Axios from "./utils/axios.js";

### js-base64歌词解码（P-lyric.vue）

①安装插件：

　　　　npm install js-base64

②引入：

　　　　import {Base64} from "js-base64";

③解码：Base64.decode()方法

            this.$axios.get(url,()=>{

            }).then((data)=>{
                let lyric=Base64.decode(data.lyric);
                console.log(lyric)
            });

### lyric-parser解析歌词（P-lyric.vue）

①安装插件：

　　　　npm install js-base64

②引入：

　　　　import LyricParser from "lyric-parser";

③实例化：

            let lyric=Base64.decode(data.lyric);
            this.lyricObj=new LyricParser(lyric,(obj)=>{
                this.lyric=obj.txt;
            });

④API

play() 播放歌词

stop() 暂停歌词

seek(startTime) 歌词跳转

togglePlay() 切换播放/暂停状态

### watch的用法：当data中的值发生变化时触发（P-lyric.vue）

当前组件props属性接收到父组件传来的paused和current时，用watch处理，当paused和current的值发生变化时，触发watch监听，自动执行。

    props:["paused","current"],
    watch: {
        paused(newValue,oldValue){
            if(newValue){
                this.lyricObj.togglePlay();
            }else{
                this.lyricObj.togglePlay();
            }
        },
        current(newValue,oldValue){
            console.log(newValue)   
        }
    }

当前组件接收到vuex中的传来的currentSong时，通过watch处理，当currentSong发生变化时，触发watch监听，自动执行initLyricData()。

    import {mapGetters} from "vuex";

    computed: {
        ...mapGetters(["currentSong"])
    },
    watch: {
        currentSong(newValue,oldValue){
            this.initLyricData(newValue.musicData.songmid);
        }
    }

### 播放和暂停歌词，点击进度条跳转到对应歌词（P-lyric.vue）

①Player.vue中将playing和current传到P-lyric.vue中：

        <PLyric :playing="playing" :current="current"></PLyric>

②P-lyric.vue中通过props接收，通过watch监听处理接收到的playing和current，与歌曲播放同步：（watch特点：当值发生变化时自动触发）

        props:["playing","current"],
        watch: {
            playing(newValue,oldValue){
                if(newValue){
                    this.lyricObj.togglePlay();
                }else{
                    this.lyricObj.togglePlay();
                }
            },
            current(newValue,oldValue){
                let seekTime=newValue*1000;
                this.lyricObj.seek(seekTime);
            }
        }