axios的get和post请求方式

最新推荐文章于 2025-04-14 13:48:00 发布

puddingcsdn

最新推荐文章于 2025-04-14 13:48:00 发布

阅读量978

点赞数

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/puddingcsdn/article/details/109207610

版权

本文介绍了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=

最低0.47元/天解锁文章