小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。
前言
axios 在请求中广泛应用 今天 我们一起来学习一下axios
引入axios
- 安装
npm install axios
- 使用bower
bower install axios
- 使用cdn
<scriptsrc="https://unpkg.com/axios/dist/axios.min.js"></script>
基本使用
<body>
<div>
<button>发送get请求</button>
<button>发送post请求</button>
<button>发送put请求</button>
<button>发送delete请求</button>
</div>
<script>
// 获取按钮
const btns = document.querySelectorAll('button')
// 第一个按钮绑定事件
btns[0].onclick = () => {
// 发送AJAX请求
axios({
// 请求类型
method: 'GET',
// URL
url: 'http://localhost:3000/posts/1',
}).then(response => {
console.log(response)
})
}
// 第二个按钮添加新的文章
btns[1].onclick = () => {
// 发送AJAX请求
axios({
// 请求类型
method: 'POST',
// URL
url: 'http://localhost:3000/posts',
// 设置请求体
data: {
title: "今天小雨不断",
author: "vike"
}
}).then(response => {
console.log(response)
})
}
// 第三个按钮 更新数据
btns[2].onclick = () => {
// 发送AJAX请求
axios({
// 请求类型
method: 'PUT',
// URL
url: 'http://localhost:3000/posts/2',
// 设置请求体
data: {
title: "今天小雨不断",
author: "vike123"
}
}).then(response => {
console.log(response)
})
}
// 第四个按钮 删除数据
btns[3].onclick = () => {
// 发送AJAX请求
axios({
// 请求类型
method: 'DELETE',
// URL
url: 'http://localhost:3000/posts/2',
// 设置请求体
}).then(response => {
console.log(response)
})
}
</script>
</body>
其他使用
// 发送 GET 请求
btns[0].onclick = () => {
axios.request({
// 请求类型
method: 'GET',
// url地址
url: 'http://localhost:3000/posts/1'
}).then(response => {
console.log(response)
})
}
// 发送post请求
btns[1].onclick = () => {
axios.post(
// 请求地址
'http://localhost:3000/comments',
// 请求内容
{
"body": "vike",
"postId": 2
}
).then(response => {
console.log(response)
})
}
axios默认配置
// 默认配置
axios.defaults.method = 'GET' // 设置默认的请求类型为GET
axios.defaults.baseURL = 'http://localhost:3000' //设置基础URL
axios.defaults.params = {id:2} //url额外参数
axios.defaults.timeout = 3000 // 超时时间设置
更多配置
总结
- 今日小知识get
