axios （get post请求、头部参数添加）傻瓜式入门axios

最新推荐文章于 2025-05-22 16:17:46 发布

蜗牛专注学习

最新推荐文章于 2025-05-22 16:17:46 发布

阅读量1.9w

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/melon__/article/details/105528564

vue 专栏收录该内容

5 篇文章

订阅专栏

本文提供axios的简单入门教程，包括如何通过CDN引入JS文件，使用GET和POST请求，以及如何在头部设置Content-Type，支持'application/json'和'multipart/form-data'。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

傻瓜式入门，简单粗暴说用法

通过cdn引入js文件

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

get请求，默认'Content-Type': 'application/json'，可在头部参数中，修改Content-Type

axios.get('请求地址',{
    params: {  //body参数
        id:1, //如：key：id value:1；
        name:'joe'  //key2：name value：'joe'
    },
    headers:{ //头部参数
        token:self.vistorToken
    }
})
.then(function (response) { //请求成功，response接收返回参数
    console.log(response);
 })
.catch(function (error) { //请求失败，error接收失败原因
    console.log(error);
})

post请求

'Content-Type': 'application/json'

axios.post('请求地址',
    {  //body参数
        cityCode:0,
        City:fCity,
        channelNo:'motuWebsite',
        predictPrice:self.DPredictPrice,
        phone:self.tele
	},  
	{        
        headers: {  //头部参数
        'Content-Type': 'application/json',
        token:sessionStorage.getItem('token')
		}
    }								
)
.then(function (response) { //请求成功
    console.log(response);
})
 .catch(function (error) { //请求失败
    console.log(error);
});

'Content-Type': 'multipart/form-data'

//构造body参数
let params = new FormData()
params.append('Travel', self.Travel)
params.append('City', fCity)
params.append('Discount', 1)
axios.post('请求地址',params,
    {
        headers: {  //头部参数
            'Content-Type': 'multipart/form-data'
        }
    })
.then(function (response) {  //请求成功
    console.log(response);
})
.catch(function (error) {  //请求失败
    console.log(error);
});