【axios笔记①】post/get使用及其细节

POST传参用data,GET传参用params（POST的话可以混用）

 

POST方法:

普通post请求：conten-typet:application/x-www-form-urlencoded

带文件post/get请求：content-type:'multipart/form-data'

var post_data = new URLSearchParams();
post_data.append('a',1);
//或两种方法都可以，但如果上传文件就一定要上面那种了
var post_data = new FormData();
post_data.append('a',1);
//var file = document.querySelector('#file');
//post_data.append('file',file.files[0]);

axios({
	method:'post',
	url:'你的地址',
	data:post_data,
    //post的话可以混用get的传参
    //params:{b:2};
    // (自定头部的话跨域会报错，我也不懂为什么，jq反而一切正常)
    headers:{
        //普通请求
        'Content-Type': 'application/x-www-form-urlencoded',

        //上传文件或普通请求
        // 'Content-Type': 'multipart/form-data',

        //自定义头部
        'X-Custom-Header': '123456789132456789'
    }
}).then((data)=>{
    //输出返回数据
    console.log(data.data)
}).catch((error)=>{
    //输出错误信息
    console.log(error)
});

axios.post('你的地址',
            {
                data:post_data
            },
            {
                headers:{
                //自定义头部
                'X-Custom-Header': '123456789132456789'
                }
            }).then((data)=>{
    //输出返回数据
    console.log(data.data)
}).catch((error)=>{
    //输出错误信息
    console.log(error)
});

错误示例:（直接把json传给data中）

axios({
	method:'post',
	url:'你的地址',
	data:{
            a:1  //直接报错
        },
}).then((data)=>{
    //输出返回数据
    console.log(data.data)
});

GET方法

axios({
	method:'get',
	url:'你的地址',
    params:{b:2};
    // (自定头部的话跨域会报错，我也不懂为什么，jq反而一切正常)
    headers:{
        //上传文件或普通请求
        // 'Content-Type': 'multipart/form-data',

        //自定义头部
        'X-Custom-Header': '123456789132456789'
    }
}).then((data)=>{
    //输出返回数据
    console.log(data.data)
}).catch((error)=>{
    //输出错误信息
    console.log(error)
});

axios.get('你的地址',
            {
                params:{b:2}
            },
            {
                headers:{
                //自定义头部
                'X-Custom-Header': '123456789132456789'
                }
            }).then((data)=>{
    //输出返回数据
    console.log(data.data)
}).catch((error)=>{
    //输出错误信息
    console.log(error)
});