封裝axios,以及封裝網易雲音樂api文檔中的全部請求
封裝號的js文件地址Github:雲博前端項目-網易雲音樂api封裝後的js文件地址前端
向將axios請求封裝vue
npm install axios -s
封裝的請求函數文件,經過傳入type=GET/POST/PUT/DELETE分別發送
axios.get(url)和
axios.post(url,data)ios
/* ajax請求函數模塊 返回值: promise對象(異步返回的數據是: response.data) 其它請求使用axios.post請求數據,好比type='PUT' */ import axios from 'axios' export default function ajax (url, data={}, type='GET') { return new Promise(function (resolve, reject) { // 執行異步ajax請求 let promise; if (type === 'GET') { // 準備url query參數數據 let dataStr = ''; //數據拼接字符串 Object.keys(data).forEach(key => { dataStr += key + '=' + data[key] + '&' }); if (dataStr !== '') { dataStr = dataStr.substring(0, dataStr.lastIndexOf('&')); url = url + '?' + dataStr } // 發送get請求 promise = axios.get(url) } else { // 發送post請求 promise = axios.post(url, data) } promise.then(function (response) { // 成功了調用resolve() resolve(response.data) }).catch(function (error) { //失敗了調用reject() reject(error) }) }) }
調用的例子
例如郵箱登陸的封裝函數git
const apiUrl='http://www.huashengshu.top:3000';//網易雲音樂服務器地址,服務器搭建訪問前面文檔地址:https://binaryify.github.io/NeteaseCloudMusicApi/#/?id=安裝 import ajax from '../../ajax'; //導入封裝的axios /** * 郵箱登陸 * @param email 郵箱號 * @param password 密碼 * @returns {Promise<unknown>} */ export const reqLoginEmail = (email,password)=>ajax(`${apiUrl}/login/`,{email,password});
import {reqLoginEmail} from "@/api/music/163/163musicApi";//導入函數 //調用郵箱登陸函數 async test() { const result = await reqLoginEmail('郵箱','密碼'); console.log(result);//得到到的數據result }