只做一件事:发送请求
axios插件别的作用没有,只是用来发送ajax请求,所以它的使用也很简单
axios有专门的文档,点击这里查看axios文档
其实只要把 jQuery 里面封装的ajax请求搞会了,这个也不成问题
1. get请求
语法:axios.get(url, {params:obj}).then(callback)
- 第一个参数是 url 地址
- 第二个参数是 携带的参数,注意是对象里面包含了params属性,属性值为携带的数据对象
- .then()里面放上回调函数
注意:
回调函数里面返回的 res 是axios封装的 返回值,我们真正需要的在 res.data 里面。
代码展示
/* 测试 GET 请求 */
// 1. 注册点击事件
$('#btn1').click(function() {
// 2. 准备数据和URL
let url = 'http://xxxxx'
let paramsObj = {
bookname: '三国演义'
}
// 3. 使用 axios 发送请求
// 第一个参数是 URL 地址
// 第二个参数是携带的数据(发送GET请求时 参数可以不带)
// 最后 .then(callback)表示响应的回调函数
axios.get(url, {
params: paramsObj
}).then(function(res) {
// console.log(res); // res 是 axios 封装的,真正的结果是 res.data
console.log(res);
})
})
返回的 res 对象
而我们真正需要的是其中的data
2. post请求
语法:axios.post(url, paramsObj).then(callback)
注意:
其他的参数都和 get 请求一样,第二个参数没有了外面的大括号,直接放要发送的数据对象
/* 测试 POST 请求 */
// 1. 注册点击事件
$('#btn2').click(function() {
let url = 'http://XXXXX'
let paramsObj = {
bookname: '老李学ajax的第四天',
author: '老李',
publisher: '黑马'
}
// 2. 发送 POST 请求
axios.post(url, paramsObj).then(function(res) {
console.log(res.data);
})
})
3. axios请求
先放代码展示
$('#btn3').click(function() {
axios({
method: 'get',
url: 'http://XXXXXX',
// 使用 axios 发送 get 请求携带的参数叫 params
params: {
id: 1
},
}).then(function(res) {
console.log(res.data);
})
})
/* ----------------------------------------------------------------------- */
$('#btn4').click(function() {
axios({
method: 'post',
url: 'http://XXXXX',
// 使用 axios 发送 post 请求携带的参数叫 data
data: {
bookname: '李云龙日记',
author: '李云龙',
publisher: '独立团出版社'
},
}).then(function(res) {
console.log(res.data);
})
})
参数说明
- method:请求类型(get / post)
- url:请求地址
- 携带参数:get请求里面的参数作为 params 属性的值;post请求里面的参数作为 data 属性里面的值
- then(callback):回调函数里面的res.data才是我们真正需要的数据对象