如何在vue中使用axios?

一、在ui中新增axios依赖

如何在vue中使用axios?_第1张图片

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

如何在vue中使用axios?_第2张图片

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

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

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

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

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

扩展一:配置默认值

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

扩展二:创建实例

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

你可能感兴趣的:(vue,vue.js,javascript,前端)