axiox——项目中写法(service例子)

1、../src/service

创建service文件夹，创建getData.ts

/*getData.ts*/
import fetch from '../config/fetch';
import { RECOMMEND_URL, TOPLIST_URL, HOTKEYS_URL } from '../config/api';
import { searchUrl, lyricsUrl } from '../config/utils';

// 获取推荐
export const recommendList = () => fetch(RECOMMEND_URL);

// 获取排行榜
export const rankList = () => fetch(TOPLIST_URL);

// 获取热门搜索关键词
export const hotList = () => fetch(HOTKEYS_URL);

// 获取搜索内容
export const searchList = (keyword, page?: number) => fetch(searchUrl(keyword, page));

// 获取歌词
export const getLyrics = (songid: number) => fetch(lyricsUrl(songid));

2、recommendList（..\src\pages\recommend\recommend.vue）

<li class="top-item" v-for="item in rankList" :key="item.id">

import { rankList } from '../../service/getData';

@Component({
    mixins: [mixin]
})
export default class rank extends Vue {
    rankList = null;
    isLoading: boolean = true;
    mounted() {
        rankList()
            .then(res => {
                this.rankList = res.data.topList;
                this.isLoading = false;
            })
            .catch(err => {
                console.log(err);
            });
    }
}
</script>

3.fetch.ts

/*fetch.ts*/
export default async (url = '', data = {}, type = 'GET', method = 'fetch') => {
    // 将类型转化成全部大写
    type = type.toUpperCase();

    if (type === 'GET') {
        let dataStr = ''; // 数据拼接字符串
        Object.keys(data).forEach(key => {
            dataStr += key + '=' + data[key] + '&';
        });

        if (dataStr !== '') {
            dataStr = dataStr.substr(0, dataStr.lastIndexOf('&'));
            url = url + '?' + dataStr;
        }
    }

    if (window.fetch && method === 'fetch') {
        const requestConfig: RequestInit = {
            method: type,
            headers: {
                Accept: 'application/json',
                'Content-Type': 'application/json',
                'Access-Control-Allow-Origin': '*'
            },
            mode: 'cors',
            cache: 'force-cache'
        };

        if (type === 'POST') {
            Object.defineProperty(requestConfig, 'body', {
                value: JSON.stringify(data)
            });
        }

        try {
            const response = await fetch(url, requestConfig);
            const responseJson = await response.json();
            return responseJson;
        } catch (error) {
            throw new Error(error);
        }
    } else {
        return new Promise((resolve, reject) => {
            let requestObj;
            // 浏览器是否支持XMLHttpRequest
            if ((window as any).XMLHttpRequest) {
                requestObj = new XMLHttpRequest();
            } else {
                requestObj = new ActiveXObject('Microsoft.XMLHTTP');
            }

            let sendData = '';
            if (type === 'POST') {
                sendData = JSON.stringify(data);
            }

            requestObj.open(type, url, true);
            requestObj.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
            requestObj.send(sendData);

            requestObj.onreadystatechange = () => {
                if (requestObj.readyState === 4) {
                    if (requestObj.status === 200) {
                        let obj = requestObj.response;
                        if (typeof obj !== 'object') {
                            obj = JSON.parse(obj);
                        }
                        resolve(obj);
                    } else {
                        reject(requestObj);
                    }
                }
            };
        });
    }
};

4、utils.ts

import { LYRICS_URL, SEARCH_URL } from './api';

// 歌url
export function songUrl(id: number) {
    // return `http://ws.stream.qqmusic.qq.com/${id}.m4a?fromtag=46`;
    return `http://isure.stream.qqmusic.qq.com/C100${id}.m4a?fromtag=32`;
}

// 歌词 url
export function lyricsUrl(songid: number) {
    return `${LYRICS_URL}?id=${songid}`;
}

// 相册
export function albumCoverUrl(id: number) {
    return `https://y.gtimg.cn/music/photo_new/T002R150x150M000${id}.jpg`;
}

// 处理搜索的 url
// @param {any} keyword 用户输入的数据
// @param {number} [page=1]  页数默认为1
export function searchUrl(keyword, page = 1) {
    return `${SEARCH_URL}?keyword=${keyword}&page=${page}`;
}