一、原因
不想把网络请求分散到每个页面,方便以后的更改,将请求基础地址,请求方法具体地址,统一导出接口分散开来
二、封装过程
新建三个页面
1.封装utils/request.js 封装请求基础地址
// 网络请求 - 二次封装
import axios from 'axios'
axios.defaults.baseURL = "http://localhost:3000"
export default axios
2.封装src/api/Home.js 封装网络请求方法
//文件名-尽量和模块文件名统一-(方便查找)
import request from '@/utils/request.js'
//导出方法 首页-推荐歌单的数据
export const recommendMusic = (params) => request({
url: '/personalized',
params
//将来外边可能传入params的值
})
3.在src/api/index.js - 统一导出接口供外部使用
//api文件夹下的 各个模块请求模块js 都统一来到index.js向外导出
import { recommendMusic, newMusic } from './Home.js'
export const recommendMusicApi = recommendMusic
export const newMusicApi = newMusic
4.页面使用
import { recommendMusicAPI } from '@/api/index'
async function myFn(){
const res = await recommendMusicAPI({limit: 6});
console.log(res);
}
myFn();