关于Vue3使用axios的配置教程详解

2023-05-16

一、安装axios

1

npm install axios --save

二、配置axios,添加拦截器

在src目录下新建一个request文件夹,在里面新建index.ts(或者.js)文件,编辑代码如下:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

import axios from 'axios'

// 创建一个 axios 实例

const service = axios.create({

    baseURL: '/api', // 所有的请求地址前缀部分

    timeout: 60000, // 请求超时时间毫秒

    withCredentials: true, // 异步请求携带cookie

    headers: {

        // 设置后端需要的传参类型

        'Content-Type': 'application/json',

        'token': 'your token',

        'X-Requested-With': 'XMLHttpRequest',

    },

})

// 添加请求拦截器

service.interceptors.request.use(

    function (config) {

        // 在发送请求之前做些什么

        return config

    },

    function (error) {

        // 对请求错误做些什么

        console.log(error)

        return Promise.reject(error)

    }

)

// 添加响应拦截器

service.interceptors.response.use(

    function (response) {

        console.log(response)

        // 对响应数据做点什么

        // dataAxios 是 axios 返回数据中的 data

        const dataAxios = response.data

        // 这个状态码是和后端约定的

        const code = dataAxios.reset

        return dataAxios

    },

    function (error) {

        // 对响应错误做点什么

        console.log(error)

        return Promise.reject(error)

    }

)

export default service

三、使用axios发送请求

在src目录下新建一个apis文件夹,这里面放入今后所有的请求文件,例如新建一个请求用户信息的接口user.ts,代码如下:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

// 导入axios实例

import httpRequest from '@/request/index'

// 定义接口的传参

interface UserInfoParam {

    userID: string,

    userName: string

}

// 获取用户信息

export function apiGetUserInfo(param: UserInfoParam) {

    return httpRequest({

        url: 'your api url',

        method: 'post',

        data: param,

    })

}

接着在具体业务页面里使用这个请求,例如:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

<script setup lang="ts">

import { onMounted } from 'vue'

import { apiGetUserInfo } from '@/apis/user'

function getUserInfo() {

    const param = {

        userID: '111',

        userName: '2222',

    }

    apiGetUserInfo(param).then((res) => {

        console.log(res)

    })

}

onMounted(() => {

    getUserInfo()

})

</script>

附:Vue3 中全局引入 axios

main.js中

1

2

3

import axios from 'axios'

const app = createApp(App) // 将默认改写为这样

app.provide('$axios', axios)

组件内使用axios(compositionAPI)

1

2

3

4

5

6

7

8

9

<script setup>

    import { inject } from 'vue'

    const $axios = inject('$axios')

    $axios.get('https://api.com').then((resp) => {   

      console.log(resp.data)

    }).catch((err) => {

      console.log(err)

    })

</script>

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

关于Vue3使用axios的配置教程详解 的相关文章

随机推荐

  • 嵌入式linux应用开发入门纲要

    目录 C语言基础C 43 43 拓展linux基本操作io操作数据结构进程线程网络编程sqlite数据库实战项目 C语言基础 基本数据类型 条件语句 循环语句 函数 算术运算 逻辑运算 指针 结构体 联合体 枚举 malloc C 43 4
  • 全能扫地机器人的想法

    他要会自己充电 最好 xff0c 他是可以太阳能充电 xff0c 没电了 xff0c 他自己去晒太阳 他要自己规划路线 他最好我不在家的时候工作 他得会自己打包好垃圾 他要会拖地 我可以语音控制他 我叫他的时候 xff0c 他可以报告自身的
  • qt根据组件名字找到组件

    比方说知道一个在tw下QPushButton的ObjectNam为 34 ok 34 xff0c 那么它的组件指针就是 xff1a auto btn 61 ui gt tw gt findChild lt QPushButton gt 34
  • linux下zip加密压缩和解压

    对于目录a的无密码压缩 xff1a zip r aa zip aa 对于目录a的无密码j解压 xff1a unzip aa zip 对于目录a的加密压缩 xff0c 密码为123456 xff1a zip rP 123456 a zip a
  • SESSION 的数据保存在哪里呢?

    SESSION 的数据保存在哪里呢 xff1f 当然是在服务器端 xff0c 但不是保存在内存中 xff0c 而是保存在文件或数据库中 默认情况下 xff0c php ini 中设置的 SESSION 保存方式是 files xff08 s
  • 在ubuntu20.04安装vscode

    在PC上安装 照以下步骤在Ubuntu 20 04上安装VS Code xff1a 打开终端 添加Microsoft的软件包存储库到APT包管理器中 xff0c 输入以下命令 xff1a curl https packages micros
  • 有两个以上的USB设备,他们的Vendor ID和Product ID都一样,如何指定对应的usb插口和/dev/ttyUSB的序号?

    如果有两个以上的USB设备 xff0c 他们的Vendor ID和Product ID都一样 xff0c 那么无法通过Vendor ID和Product ID来区分它们 需要采取其他方式来指定对应的USB插口和 dev ttyUSB的序号
  • Could not find a configuration file for package “OpenCV“ that is compatible with requested version “

    错误详情 xff1a Could not find a configuration file for package 34 OpenCV 34 that is compatible with requested version 34 3 0
  • 在ubuntu安装c++版本的absl库

    对于 C 43 43 xff0c 您可以通过以下步骤安装 absl xff1a 1 安装必要的依赖项 xff1a sudo apt get install cmake g 43 43 git 2 克隆 absl 代码库 xff1a git
  • 一个带有信号量的列表,有什么作用

    一个带有信号量的列表可以用于在多线程环境下实现线程间的同步和通信 具体来说 xff0c 它可以实现以下功能 xff1a 1 限制列表的大小 xff1a 通过设置列表的最大容量 xff0c 可以限制列表中元素的数量 xff0c 避免列表过大导
  • TR069是什么鬼

    一 xff0c TR069是什么 1 xff0c 概念 搞嵌入式或通信设备的 xff0c 或多或少都会听说TR069 那他是什么鬼 xff1f TR069 xff0c 就是CPE广域网管理协议 它用于ACS和CPE之间的自动协商交互 xff
  • 为 Konsole 单独设置暗色主题

    在 KDE 中设置亮色主题后 xff0c konsole 主体的黑色的 xff0c 但是菜单栏是白色的 对于终端 xff0c 我更偏向于使用暗色主题 xff0c 有以下思路 xff1a KWin Rule修改 konsole 配置文件命令行
  • 2019年年终总结(流水账)

    2019年年终总结 流水账 前言 马上就要是2020年了 xff0c 我此时敲下我的第一篇年终总结 马上就要过去的2019年对于我来说是平凡但却不平淡的一年 xff0c 这一年里我经历了很多 xff0c 虽然这些在别人眼中可能是微不足道的
  • 融资租赁与经营租赁的区别

    我现在手上项目的客户是一家销售公司 xff0c 他们有把自己的商品租赁给别的公司经营的业务 于是就有了上面的融资租赁与经营租赁 xff0c 这两种方式在财务上对资产的处理是不一样的 下面我们来看看这个场景 xff1a A公司把资产租给B公司
  • 【Linux系统编程(十四)】生产者和消费者问题

    文章目录 生产者和消费者1 代码示例 生产者和消费者 生产者消费者问题 xff08 英语 xff1a Producer consumer problem xff09 xff0c 也称有限缓冲问题 xff08 英语 xff1a Bounded
  • Linux下做SSH服务(远程登录)配置

    准备工作 1 检查是否安装ssh rpm q OpenSSH server 一般自带 xff0c 不用安装 2 安装ssh服务 xff1a yum list installed grep openssh server 服务器端配置 1 cd
  • Openlayer 计算多个feature的外接矩形,并且缩放到合适的视角显示

    开发gis系统的时候需要点击一个工程然后打开openlayers地图并且将该工程的线条缩放到合适的区域 xff0c 对这个问题的解决方案 xff1a 1 旋转卡壳法求点集的最小覆盖矩形面积以及周长 https www cnblogs com
  • 程序员改变世界,从未如此直观

    万万没想到 xff0c 包博士的代码让一个六岁的小学生哇哇大哭 这个让小学生流眼泪的 科学家代表 有非常漂亮的履历 xff1a 清华大学毕业 博士曾在斯坦福就读 xff0c 他现在是VIPKID的首席AI科学家 xff0c 带领四十多人的产
  • PX4飞控之PWM输出控制

    PX4飞控之PWM输出控制 多旋翼电调如好盈XRotor xff0c DJI通用电调等都支持PWM信号来传输控制信号 常用的400Hz电调信号对应周期2500us xff0c 一般使用高电平时间1000us 2000us为有效信号区间 xf
  • 关于Vue3使用axios的配置教程详解

    一 安装axios 1 npm install axios save 二 配置axios xff0c 添加拦截器 在src目录下新建一个request文件夹 xff0c 在里面新建index ts xff08 或者 js xff09 文件