axios

发表于 更新于 分类于 本文字数： 1.5k 阅读时长 ≈ 1 分钟

什么是axios

Axios是专注于网络数据请求的库
相比于原生的XMLHttpRequest对象，axios简单易用
相比于jQuery，axios更加轻量化，只专注与网络数据请求

axios发起GET请求

语法

1
axios.get('url',{params:{/*参数*/}}).then(callback)

示例

1
2
3
4
5
6
7
8
9
10
// 请求的URL地址
var url = 'http://www.liulongbin.top:3006/api/get';
// 请求的参数对象
var paramsObj = {name:'zs',age:20};
// 调用 axios.get() 发起 GET请求
axios.get(url,{params:paramsObj}).then( (res) => {
    // res.data 是服务器返回的数据
    var result = res.data;
    console.log(result);
})

axios发起POST请求

语法

1
axios.get('url',{/*参数*/}).then(callback)

示例

1
2
3
4
5
6
7
8
9
10
// 请求的URL地址
var url = 'http://www.liulongbin.top:3006/api/post';
// 要提交到服务器的数据
var dataObj = {location:'北京',address:'顺义'};
// 调用 axios.post() 发起 POST请求
axios.post(url,dataObj).then( (res) => {
    // res.data 是服务器返回的数据
    var result = res.data;
    console.log(result);
})

直接使用axios发起请求

axios也提供了类似与jQuery中$.ajax()的函数
语法

1
2
3
4
5
6
axios({
    method: '请求类型',
    url: '请求的URL地址',
    data: {/*POST数据*/},
    params: {/*GET参数*/}
}).then(callback)

直接使用axios发起GET请求

1
2
3
4
5
6
7
8
9
10
11
axios({
    method: 'GET',
    url: 'http://www.liulongbin.top:3006/api/get',
    params: {
        // GET 参数要通过 params 属性提供
        name: 'zs',
        age: 20
    }
}).then((res) => {
    console.log(res.data);
})

直接使用axios发起POST请求

1
2
3
4
5
6
7
8
9
10
11
axios({
    method: 'POST',
    url :'http://www.liulongbin.top:3006/api/post',
    data: {
        // POST 数据要通过 data 属性提供
        bookname :'程序员的自我修养',
        price: 666
    }
}).then( (res) => {
    console.log(res.data);
})