Vue2/Vue3 封装axios请求 Apiserver.request.Api.Vue.prototype.app.

//首先了解一点vue3的钩子函数和vue2不同了,且挂载方法也不同了
import axios from 'axios';
Vue.prototype.$http = axios  //之前vue2的写法

// vue3中添加全局自定义属性的方法 // 全局自定义属性在页面中可以通过this直接使用
 app.config.globalProperties.$http = axios;

server.js

import axios from 'axios'

let server = axios.create({
    baseURL: "https://cnodejs.org/api",
    timeout: 5000,
})

// 请求拦截
server.interceptors.request.use(config => {
    // console.log(config); // config是一个包含了所有请求信息的对象 在这里可以修改config对象 修改之后需要返回config对象 请求才会正常进行
    config.headers.token = "asidoaslkd-12301jkwqmwlq-sadjalsmdl2"
    return config
}, err => {
    // throw new Error(err)
    Promise.reject(err)
})


// 响应拦截
server.interceptors.response.use(res => {
    // res 是服务器返回的数据信息
    // console.log(res);
    return res.data
}, err => {
    throw new Error(err)
})

export default server

request.js

import server from './server'

export default function request({ method = "get", url = '', data = {}, params = {} }) {
    return server({
        method,
        url,
        data,
        params
    })
}

Api.js

import request from "./request";

export const getTopics = () => request({ url: "/v1/topics" })

在页面使用

import { getTopics } from '../utils/api'
function getTopics().then(res => {
  console.log(res);
})

//vue3写法

完!

Don't forget, a person's greatest emotional need is to feel appreciated.