Axios发送Get、Post请求示例

 <!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
    <meta charset="UTF-8">
    <title>测试</title>
    <script>
        // TODO axios发送请求统一模板
        axios({
            method: `get`, // http请求方法
            url: `http://httpbin.org/get?param=hello` // http服务地址
        })
            .then(function (response) { // 自动转换JSON数据
                // 请求成功响应结果response
                console.log(response);
                console.log(JSON.stringify(response.url));
            }).catch(function (error) {
            // 请求异常响应结果
            console.log(error);
        });
        // TODO axios发送GET请求
        axios.get("http://httpbin.org/get?param=hello")
        .then(function (response){
           console.log("[GET] response" + response)
        })
        .catch(function () {
           console.log("[GET] response" + response)
        });
        /*
        使用axios(config)发送http请求，config为该请求的配置信息对象
        axios.get等同于axios使用method:get。
        axios是基于Promise的HTTP客户端，所以可以使用then、catch对请求结果进行处理。
        * */
        // TODO axios通过params包装发送GET请求
        axios.get("http://httpbin.org/get", {
            params: {
                param: "hello"
            }
        }).then(function (response) {
            console.log(response);
        }).catch(function (error) {
            console.log(error);
        });
        // TODO axios发送POST请求
        axios({
            method: `post`, // 请求方法
            url: `http://httpbin.org/post`, // 请求服务地址
            data: {
                firstName: 'zz',
                lastName: 'wang'
            }
        });
        // TODO axios发送POST请求
        axios.post('http://httpbin.org/post', {
            firstName: 'zz',
            lastName: 'wang'
        })
        // dismiss [then][catch]
        // TODO axios发送并行请求
        // 在一些情况下需要某些异步网络请求结果处理有一定的顺序
        // 比如 getHello()和getWorld()两个异步操作，将两个HTTP的请求都完成之后，结果合并并处理或进行下一步操作
        function getHello() {
            return axios.get('http://httpbin.org/get?param=hello');
        }
 
        function getWorld() {
            return axios.get('http://httpbin.org/get?param=world');
        }
 
        axios.all([getHello(), getWorld()])
            .then(axios.spread(function (res1, res2) {
                // 两个请求都执行完成之后，进入该函数
                console.log(res1.data.args.param + " " + res2.data.args.param);
            }));
        /**
         * 上面的axios.all函数还可以写成如下的形式，返回值是一个数组。
         * 然后通过数组下标获取响应结果数据。results[0]代表第一个getHello()函数的请求结果，
         * results[1]代表第二个getWorld()函数的请求结果。
         * */
        axios.all([getHello(), getWorld()])
            .then(function (results) {
                console.log(results[0].data.args.param + " " + results[1].data.args.param)
            });
    </script>
    <style>
    </style>
</head>
<body>
 
</body>

Axios将表单以对象的形式传输

posted @ 2021-12-11 20:18 Felix_Openmind 阅读(1293) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

阅读排行：
· winform 绘制太阳，地球，月球运作规律
· 超详细：普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· AI 智能体引爆开源社区「GitHub 热点速览」
· 写一个简单的SQL生成工具

2025年3月

日

一

二

三

四

五

六

Felix_Openmind

https://github.com/serendipitywzz

Axios发送Get、Post请求示例

Axios将表单以对象的形式传输

最新随笔

随笔分类 (404)

随笔档案 (410)

文章分类 (66)

文章档案 (99)

软件开发

阅读排行榜

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
	<meta charset="UTF-8">
	<title>测试</title>
	<script>
	// TODO axios发送请求统一模板
	axios({
	method: `get`, // http请求方法
	url: `http://httpbin.org/get?param=hello` // http服务地址
	})
	.then(function (response) { // 自动转换JSON数据
	// 请求成功响应结果response
	console.log(response);
	console.log(JSON.stringify(response.url));
	}).catch(function (error) {
	// 请求异常响应结果
	console.log(error);
	});
	// TODO axios发送GET请求
	axios.get("http://httpbin.org/get?param=hello")
	.then(function (response){
	console.log("[GET] response" + response)
	})
	.catch(function () {
	console.log("[GET] response" + response)
	});
	/*
	使用axios(config)发送http请求，config为该请求的配置信息对象
	axios.get等同于axios使用method:get。
	axios是基于Promise的HTTP客户端，所以可以使用then、catch对请求结果进行处理。
	* */
	// TODO axios通过params包装发送GET请求
	axios.get("http://httpbin.org/get", {
	params: {
	param: "hello"
	}
	}).then(function (response) {
	console.log(response);
	}).catch(function (error) {
	console.log(error);
	});
	// TODO axios发送POST请求
	axios({
	method: `post`, // 请求方法
	url: `http://httpbin.org/post`, // 请求服务地址
	data: {
	firstName: 'zz',
	lastName: 'wang'
	}
	});
	// TODO axios发送POST请求
	axios.post('http://httpbin.org/post', {
	firstName: 'zz',
	lastName: 'wang'
	})
	// dismiss [then][catch]
	// TODO axios发送并行请求
	// 在一些情况下需要某些异步网络请求结果处理有一定的顺序
	// 比如 getHello()和getWorld()两个异步操作，将两个HTTP的请求都完成之后，结果合并并处理或进行下一步操作
	function getHello() {
	return axios.get('http://httpbin.org/get?param=hello');
	}

	function getWorld() {
	return axios.get('http://httpbin.org/get?param=world');
	}

	axios.all([getHello(), getWorld()])
	.then(axios.spread(function (res1, res2) {
	// 两个请求都执行完成之后，进入该函数
	console.log(res1.data.args.param + " " + res2.data.args.param);
	}));
	/**
	* 上面的axios.all函数还可以写成如下的形式，返回值是一个数组。
	* 然后通过数组下标获取响应结果数据。results[0]代表第一个getHello()函数的请求结果，
	* results[1]代表第二个getWorld()函数的请求结果。
	* */
	axios.all([getHello(), getWorld()])
	.then(function (results) {
	console.log(results[0].data.args.param + " " + results[1].data.args.param)
	});
	</script>
	<style>
	</style>
	</head>
	<body>

	</body>