DC's blog DC's blog
首页
  • 计算机基础
  • linux基础
  • mysql
  • git
  • 数据结构与算法
  • axure
  • english
  • docker
  • opp
  • oop
  • 网络并发编程
  • 不基础的py基础
  • 设计模式
  • html
  • css
  • javascript
  • jquery
  • UI
  • 第一次学vue
  • 第二次学vue
  • Django
  • drf
  • drf_re
  • 温故知新
  • flask
  • 前后端不分离

    • BBS
    • 订单系统
    • CRM
  • 前后端部分分离

    • pear-admin-flask
    • pear-admin-django
  • 前后端分离

    • 供应链系统
  • 理论基础
  • py数据分析包
  • 机器学习
  • 深度学习
  • 华中科大的网课
  • cursor
  • deepseek
  • 杂文
  • 罗老师语录
  • 关于我

    • me
  • 分类
  • 归档
GitHub (opens new window)

DC

愿我一生欢喜,不为世俗所及.
首页
  • 计算机基础
  • linux基础
  • mysql
  • git
  • 数据结构与算法
  • axure
  • english
  • docker
  • opp
  • oop
  • 网络并发编程
  • 不基础的py基础
  • 设计模式
  • html
  • css
  • javascript
  • jquery
  • UI
  • 第一次学vue
  • 第二次学vue
  • Django
  • drf
  • drf_re
  • 温故知新
  • flask
  • 前后端不分离

    • BBS
    • 订单系统
    • CRM
  • 前后端部分分离

    • pear-admin-flask
    • pear-admin-django
  • 前后端分离

    • 供应链系统
  • 理论基础
  • py数据分析包
  • 机器学习
  • 深度学习
  • 华中科大的网课
  • cursor
  • deepseek
  • 杂文
  • 罗老师语录
  • 关于我

    • me
  • 分类
  • 归档
GitHub (opens new window)
  • html

  • css

  • javascript

  • jquery

  • UI库

  • 第一次学vue

  • 第二次学vue

    • vue语法基础
    • 创建vite项目
    • vue-router
    • pinia组件
    • cookie组件
    • axios组件
  • 前端
  • 第二次学vue
DC
2025-01-07

axios组件

运行命令 npm install axios --save 安装好后, 在src目录下新建 文件夹plugins, 在该目录下 创建文件 axios.js

import axios from "axios";

// 一般会在这设置固定的配置 > ★通用的写在这
let config = {
    baseURL: "https://api.luffycity.com",
    timeout: 20 * 1000  // 请求超时时间
}
const _axios = axios.create(config)

// 请求拦截器 > ★需要读取一些配置携带点东西过去的写在这
_axios.interceptors.request.use(function (config) {
    console.log("请求前:", config)
    // 1.去pinia中读取当前用户token
    // 2.发送请求的url get参数中携带token
    //   若axios已设置了params,在原有基础上,添加token这个键值对; 若还未设置,就给当前请求添加params
    if (config.params) {
        config.params['token'] = "asdfasdfasdf"
    } else {
        config.params = {token: "asdfasdfasdf"}
    }
    return config;
})

export default _axios;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

在任意组件中, 使用axios发送请求

import _axios from "@/plugins/axios.js";

// 发送网络请求
// 以下代码相当于向该地址发送get请求
// https://api.luffycity.com/api/v1/course/category/free/?courseType=free&token=asdfasdfasdf
_axios.get("/api/v1/course/category/free/?courseType=free").then((res) => {
  console.log(res.data);
})
1
2
3
4
5
6
7
8

cookie组件

← cookie组件

最近更新
01
deepseek本地部署+知识库
02-17
02
实操-微信小程序
02-14
03
教学-cursor深度探讨
02-13
更多文章>
Theme by Vdoing | Copyright © 2023-2025 DC | One Piece
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式