vue 封装axios

安装 axios 

src/utils/request.js

import axios from "axios";
const service = axios.create({
    baseURL: 'http://testapi.xuexiluxian.cn',
    // baseURL: import.meta.env.VITE_BASE_URL
})
// 添加请求拦截器    ---前端给后端的东西，还没到后端
axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    return config;
}, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
});
// 添加响应拦截器    ---后端给前端的东西
axios.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    return response;
}, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
});
export default service

src/utils/api.js

//引入封装的请求自动拼接/api和请求，响应拦截器
import request from '@/utils/request'
//导出各个模块的请求接口 可动态传入数据data接收
export const login = data => {
    return request({
        url: '/sys/login',
        method: 'POST',
        data
    })
}

export const register = data => {
    return request({
        url: '/sys/register',
        method: 'get',
        data
    })
}

// import request from '../utils/request';
// get 方式，传参使用 params
// post 方式，传参使用 data
export function courseList(data) {
    return request({
        url: '/api/course/search',
        method: 'post',
        data
    })
}

import { courseList } from './api/course'
courseList({
    pageNum: 1,
    pageSize: 10
  }).then(res => {
    console.log(res);
  })