Vue-基于axios网络请求的二次封装

一、原因

不想把网络请求分散到每个页面,方便以后的更改,将请求基础地址,请求方法具体地址,统一导出接口分散开来

二、封装过程

新建三个页面

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();