AJAX-Axios发送Ajax请求

weixin_47199727

已于 2024-04-17 00:19:34 修改

阅读量234

点赞数 3

文章标签： ajax 前端 javascript

于 2024-04-06 16:56:08 首次发布

本文链接：https://blog.csdn.net/weixin_47199727/article/details/137431292

版权

一 Axios两种请求方式

1.Get请求

axios.get('/axios-server', {
    //url 参数
    params: {
        id: 100,
        vip: 7
    },
    //请求头信息
    headers: {
        name: 'atguigu',
        age: 20
    }
}).then(response=>{
    //响应状态码
    console.log(response.status);
    //响应状态字符串
    console.log(response.statusText);
    //响应头信息
    console.log(response.headers);
    //响应体
    console.log(response.data);
}).catch(error=>{
    console.log(error);
}).finally(()=>{
    console.log("必须执行")
})

2.Post请求

axios.post('/axios-server', {
        username: 'admin',
        password: 'admin'
    }, 
    {
        //url 
        params: {
            id: 200,
            vip: 9
        },
        //请求头参数
        headers: {
            height: 180,
            weight: 180,
        }
    }
).then(response=>{
    //响应状态码
    console.log(response.status);
    //响应状态字符串
    console.log(response.statusText);
    //响应头信息
    console.log(response.headers);
    //响应体
    console.log(response.data);
}).catch(error=>{
    console.log(error);
}).finally(()=>{
    console.log("必须执行")
})

二 Axios函数发送请求

axios({
    //请求方法
    method : 'POST',
    //url
    url: '/axios-server',
    //url参数
    params: {
                    vip:10,
            level:30
    },
    //头信息
    headers: {
        a:100,
        b:200
    },
    //请求体参数
    data: {
        username: 'admin',
        password: 'admin'
    }
}).then(response=>{
    //响应状态码
    console.log(response.status);
    //响应状态字符串
    console.log(response.statusText);
    //响应头信息
    console.log(response.headers);
    //响应体
    console.log(response.data);
}).catch(error=>{
    console.log(error);
}).finally(()=>{
    console.log("必须执行")
})