vue中封装请求库

目的：封装项目请求架构, 为后面请求数据做准备

核心思想：分层架构

1.新建src/utils/request.js项目核心请求方法的模块文件

import axios from 'axios'

// axios函数请求的url地址前面会被拼接基地址, 即为axios请求baseURL+url后台完整地址
const request = axios.create({
  baseURL: 'http://big-event-vue-api-t.itheima.net'
})

// 导出自定义的axios方法, 供外面调用传参发请求
export default request

2.新建src/api/index.js项目接口方法统一管理模块文件

import request from '@/utils/request'

//使用按需导出，定义获取getListAPI接口
export const getListAPI = () => {
  return request({
    // 这里先用这个接口测试下, 如果url以http开头会忽略baseURL, axios直接请求此地址
    //url: 'http://geek.itheima.net/v1_0/channels'
    //这里会把baseURL和url拼接在一起，再发送axios请求
    url: '/my/cate/list'
  })
}

3.在任意组件中, 引入接口请求方法, 并请求数据

//按需导入，可以使用解构对象
import { getListAPI } from '@/api'
export default {
  created () {
    //调用函数
    this.getListFn()
  },
  methods: {
    //定义函数
    async getListFn () {
      const {data:res} = await getListAPI()
      console.log(res)
    }
  }
}

这种分层架构思想, 可以更好的统一管理项目中所有接口, 并也方便统一给axios方法添加拦截器和修改基地址