前端基础学习——数据请求之axios的基本使用

axios的使用

Axios 是专注于网络数据请求的库。

相比于原生的 XMLHttpRequest 对象，axios 简单易用。

相比于 jQuery，axios 更加轻量化，只专注于网络数据请求。

1. axios.get()的使用

// axios.get('地址', {params: {数据。。。}}).then(成功时的处理函数);

axios.get('http://www.liulongbin.top:3006/api/getbooks', {
    params: {
        id: 2
    }
})
.then(function (res) {
    // axios对响应的res部分进行了包装，之前jQuery中的res，相当于axios中的res.data
    //  - 刚开始使用时，可以使用以下操作
    res = res.data;
    console.log(res);
}); 

2. axios.post()的使用

// axios.post('地址', {数据。。。}).then(成功时的处理函数)

axios.post('http://www.liulongbin.top:3006/api/post', {
    name: 'jack',
    age: 18
})
.then(function (res) {
    console.log(res);
});

3. axios()的使用

发送get和post的区别：

• 设置请求参数的属性名不同
  • get请求参数的属性名为params
  • post请求参数的属性名为data

3.1. axios()发送get请求

axios({
    method: 'GET',
    url: 'http://www.liulongbin.top:3006/api/get',
    params: {
        name: 'jack',
        age: 18
    }
})
.then(function (res) {
    console.log(res.data);
});

3.2. axios()发送post请求

axios({
    method: 'POST',
    url: 'http://www.liulongbin.top:3006/api/post',
    data: {
        name: 'rose',
        age: 21
    }
})
.then(function (res) {
    console.log(res.data);
});