如何在vue中使用axios?

本文介绍了如何在UI中集成axios库,并在Vue应用中进行HTTP请求。主要内容包括设置axios的全局默认配置,如在main.js中配置默认参数,以及通过axios.create()创建实例以简化重复配置。对于GET和POST请求,展示了如何传递参数。同时,讨论了如何通过设置默认值和创建实例来优化代码的可读性和效率。
摘要由CSDN通过智能技术生成

一、在ui中新增axios依赖

在这里插入图片描述

二、在入口文件main.js中导入

在这里插入图片描述

三、在vue组件中发送数据请求

在这里插入图片描述
get请求:传递一个对象作为参数,在对象中使用params字段指定要发送的数据。

$http.get('login',{
params:{id:1}
}

post请求:传递一个对象作为参数,对象的属性就是要发送的数据

$http.post('login',{
username: 'lisi',
password: '1234'
})

扩展一:配置默认值

方法一:对于每次请求相同的配置选项,可以通过为配置选项设置默认值来简化代码的编写。项目中使用到的全局axios默认值可以在项目的入口文件main.js中按照如下形式进行设置:
在这里插入图片描述

扩展二:创建实例

方法二:对于每次请求相同的配置选项,也可以通过axios.create()方法来创建一个axios实例,之后使用该实例向服务器发送请求。这样就不用每次请求时重复设置配置选项了。
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值