【博学谷学习记录】超强总结，用心分享 |axios

最新推荐文章于 2024-07-25 22:24:14 发布

吉三去雪山

最新推荐文章于 2024-07-25 22:24:14 发布

阅读量120

点赞数

文章标签：学习前端 javascript

本文链接：https://blog.csdn.net/scjiji/article/details/127525269

版权

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

1.axios发起get请求：axios.get('url',{params:{/参数/}}).then(callback)

//设置请求地址
var url = 'www.baidu.com'
//设置请求的参数对象
var paramsObj = {id:1,name:'heguangsheng'}
//发起GET请求
axios.get(url,{params:paramsObj}).then(function(res){
    //res.data是服务器返回的数据
    var result = res.data
    console.log(res)
})

2.axios发起post请求：axios.post('url',{/参数/}).then(callback)

//设置请求地址
var url = 'www.baidu.com'
//设置要提交到服务器的参数对象
var datasObj = {id:1,name:'heguangsheng'}
//发起POST请求
axios.post(url,datasObj).then(function(res){
    //res.data是服务器返回的数据
    var result = res.data
    console.log(res)
})

3.axios直接发出请求--语法

//语法
axios({
    method:'请求类型',
    url:'请求的URL地址',
    data:{/*POST数据*/},
    params:{/*GET参数*/}
}).then(callback)

4.axios直接发出请求--GET

axios({
    method:'GET',
    url:'www.baidu.com',
//GET 参数要通过params属性提供
    params:{id:1,name:'heguangsheng'}
}).then(function(res){
    console.log(res.data)
})

5.axios直接发出请求--POST

axios({
    method:'POST',
    url:'www.baidu.com',
//POST 参数要通过属性提供
    data:{id:1,name:'heguangsheng'}
}).then(function(res){
    console.log(res.data)
})