npm install axios

import { createApp } from 'vue'
import App from './App.vue'
import router from './router.js'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import axios from 'axios'
import './assets/main.css'

const app = createApp(App)
app.config.unwrapInjectedRef = true
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}
app.use(router,axios)

app.mount('#app')

import axios from 'axios'
import { ElNotification, ElMessageBox } from 'element-plus'
import { h } from 'vue'

// axios实例
const request = axios.create({
    // base地址 (调用在.env文件中设置的环境变量)
    baseURL: import.meta.env.VITE_BASE_URL,
    // 默认请求头
    headers: {
        'Content-Type': 'application/json;charset=utf-8',
    },
    // 超时时间
    timeout: 10000,
    // 允许携带cookie
    withCredentials: true,
})

// 请求拦截器
request.interceptors.request.use((config) => {

    // 在发送请求前做什么
    // config.headers.Authorization = 'Bearer ' + window.localStorage.getItem('access')
    // console.log(config.headers)
    return config
}, (error) => {
    // 请求错误做什么
    return Promise.reject(error)
})

// 响应连接器
request.interceptors.response.use((response) => {
    // 对响应数据做什么
    // 1. data 正常响应时的数据(json格式)
    // 2. status 正常响应的状态码(int格式)
    const res = response.data
    console.log('正常响应:', response.status)
    return res
}, (error) => {
    // 响应错误做什么
    // 异常响应
    // 1. status为响应码(int)
    // 2. data为响应数据(json)
    //      2.1 data.detail 异常响应的描述(str)
    //      2.2 data.messages 异常响应的内容信息(list列表)
    // 3. statusText为响应码队员的描述(str)

    // var status;
    // if (status) {
    //     status = 0
    //     if (error.response) {
    //         const response = error.response
    //         if (response) {
    //             console.log("异常response.data.detail:描述", response.data.detail);
    //             console.log("异常response.data.detail:状态码", response.status);
    //             console.log("异常response.data.detail:状态描述", response.statusText);
    //             if ((response.data.code === 'token_not_valid') && (response.data.messages)) {
    //                 // status = 401 验证过期
    //                 ElNotification({
    //                     title: 'User',
    //                     message: h('a', { href: '/login/' + '?next=' + location.pathname }, `${response.status}:${response.data.messages}`),
    //                     type: 'info'
    //                 })
    //             }
    //         }
    //     }
    // }
    // status = 1
    return Promise.reject(error)
})

export default request

import request from "../utils/request.js";
// 笔记(文章)api

// 文章的请求
// 1. 传入字典config
// 例: config = reactive({
//     url: '',
//     method: '',
//     data: xxx,
// })
const article_url = '/article/'

const requestArticleList = (config) => {
    return request({
        url: article_url,
        method: 'get',
        data: config.data,
        params: config.params,
    })
}

const requestArticleDetail = (config) => {
    return request({
        url: article_url + config.id + '/',
        method: 'get',
        data: config.data,
        params: config.params,
    })
}

const requestArticlePost = (config) => {
    return request({
        url: article_url,
        method: 'post',
        data: config.data,
        params: config.params,
    })
}
const requestArticlePut = (config) => {
    return request({
        url: article_url + config.id + '/',
        method: 'put',
        data: config.data,
        params: config.params,
    })
}
const requestArticleDelete = (config) => {
    return request({
        url: article_url + config.id + '/',
        method: 'delete',
        data: config.data,
        params: config.params,
    })
}

const requestArticle = (config) => {
    return request({
        url: config.url,
        method: config.method
    })
}
export default { requestArticle, requestArticleDetail, requestArticleList, requestArticlePost, requestArticlePut, requestArticleDelete }

<script>
import { ref, reactive, onMounted } from 'vue'
import requestArticles from '../api/article'
export default {
    setup() {
        ...
         // 请求<笔记本>数据   1. id    2. title    3. user    4. notebook
        const notebooks_data = ref({})
        const get_notebooks = (id) => {
            requestNoteBooks.requestNoteBooksList({})
                .then(res => {
                    notebooks_data.value = res
                    // console.log(notebooks_data.value);
                })
                .catch(err => {
                    console.log(err);
                })
        }
    }
}