axios的get和post请求方式

本文介绍了axios库的主要特点,包括基于Promise的机制和对响应的封装。重点讲解了axios中GET和POST请求的使用,特别是POST请求默认发送JSON数据以及如何发送查询字符串格式的数据。同时,对比了axios与ajax中POST请求的区别,并给出了axios发送GET和POST请求的示例代码。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

axios的特点:
1. axios用于封装底层的XMLHttpRequest。
2. 基于promise机制,可以使用承诺对象中的方法(then,catch,finally)。
3. axios会对响应结果做二次封装。

axios中的post方式
默认发送的是json字符串,也就是请求头的默认格式为:contentType:“application/json”。
问题:如何给后台发送查询字符串格式的数据?
将对象转换为查询字符串:Qs.stringify(obj)

ajax中的post方式
默认发送的是查询字符串,也就是说请求头的默认格式为:contentType:“application/x-www-form-urlencoded”。
问题:如何给后台发送json字符串格式的数据?
将对象转换成json字符串: JSON.stringify(obj)

axios 请求方式传递参数格式:
axios.get(url[, config])
axios.post(url[, data[, config]])

例子:

1.cdn在线引入插件

<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.20.0/axios.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/qs/6.9.4/qs.min.js"></script>

2.给button绑定事件

<div id="app">
        <div>{
   {
   response}}</div>
        <button @click='findAllCustomers'>查询所有用户信息</button>
        <button @click='findCustomerById'>根据id获取顾客信息</button>
        <button @click='login'>登录</button>
        <button @click=
### AxiosGET POST 请求参数传递方式 #### GET 请求参数传递 对于 `GET` 请求,参数通常通过 URL 查询字符串的方式附加到请求地址后面。可以利用对象的形式定义这些查询参数,在发起请求时作为配置项的一部分传入。 ```javascript // 发送带有查询参数的 GET 请求 axios.get('/api/data', { params: { key1: 'value1', key2: 'value2' } }) .then(function (response) { console.log(response.data); }) .catch(function (error) { console.error(error); }); ``` 这种方式下,实际发出的 HTTP 请求会像这样:`/api/data?key1=value1&key2=value2`[^1]。 #### POST 请求参数传递 当涉及到 `POST` 请求时,情况稍微复杂一些,因为这取决于服务器端期望接收的数据格式以及 Content-Type 的设定。如果目标是提交表单编码形式的数据,则应按照如下所示设置: ```javascript // 设置默认的全局头部信息 axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'; // 提交表单数据类型的 POST 请求 axios.post('/api/formSubmit', new URLSearchParams({ param1: 'hello', param2: 'world' })) .then(function (response) { console.log(response.data); }) .catch(function (error) { console.error(error); }); ``` 而对于 JSON 数据来说,只需简单地将 JavaScript 对象直接放入第二个参数位置即可,默认情况下 Axios 已经知道如何将其序列化为合适的 payload 并适当调整 Content-Type 头部为 application/json[^4]。 需要注意的是,`GET` 请求中的参数会在浏览器地址栏显示出来,而 `POST` 请求则不会;这意味着敏感信息更适合放在后者之中[^2]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值