025_Axios

最新推荐文章于 2024-08-29 22:34:24 发布

原创最新推荐文章于 2024-08-29 22:34:24 发布 · 204 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #css3 #javascript

vue 专栏收录该内容

36 篇文章

订阅专栏

本文详细介绍了axios在浏览器和node.js环境下的使用，包括Promise支持、参数传递、响应结果分析、全局配置和拦截器的设置，以及async/await的实践应用，还提供了前后端交互的示例和axios在Web工程中的实现

1. axios是一个基于Promise用于浏览器和node.js的http客户端。

2. axios具有以下特征

2.1. 支持浏览器和node.js。

2.2. 支持Promise。

2.3. 能拦截请求和响应。

2.4. 自动转换JSON数据。

3. axios get请求传递参数

3.1. 通过url传递参数

axios.get('aa.action?id=123').then(function(ret){
		      
});

3.2. 通过params选项传递参数

axios.get('aa.action', {
	params: {
		id: 456
	}
}).then(function(ret){
  	
});

4. axios post请求传递参数

4.1. 通过选项传递参数, 默认传递的是json格式的数据

axios.post('aapj.action', {
	uname: 'lisi',
	pwd: 456
}).then(function(ret){
  	
});

4.2. 通过URLSearchParams传递参数, 发送的是传统的表单类型的数据

var params = new URLSearchParams();
params.append('uname', 'zhangsan');
params.append('pwd', '123');
axios.post('aap.action', params).then(function(ret){
  	
});

5. axios响应结果的主要属性

5.1. data: 实际响应回来的数据。

5.2. headers: 响应头信息。

5.3. status: 响应状态码。

5.4. statusText: 响应状态信息。

6. axios全局配置信息

6.1. 配置请求的基准URL地址: axios.defaults.baseURL = 'http://localhost:8080/Axios'。

6.2. 全局设置超时时间: axios.defaults.timeout = 3000。

6.3. 全局设置请求头信息: axios.defaults.headers['mytoken'] = 'aQWd15SFSa67sSD654FS48AT'。

7. axios请求拦截器

7.1. 在请求发出之前设置一些信息

axios.interceptors.request.use(function(config) {
	return config;
}, function(err){
      
});

8. axios响应拦截器

8.1. 在获取数据之前对数据做一些加工

axios.interceptors.response.use(function(res) {
	    		
}, function(err){
      
});

8. async/await的基本用法

8.1. async/await是ES7引入的新语法, 可以更加方便的进行异步操作。

8.2. async关键字用于函数上(async函数的返回值是Promise实例对象)。

8.3. await关键字用于async函数当中(await可以得到异步的结果)。

8.4. async/await用法

async function queryData() {
	var ret = await axios.get('aa.action?id=123');
};
queryData();

8.5. async/await发送多个异步请求

async function queryData() {
	var ret = await axios.get('aa.action?id=123');

	ret = await axios.post('aapj.action', {
		uname: 'lisi',
		pwd: 456
	});
};
queryData();

9. 新建一个名为Axios的动态Web工程

9.1. 编写AxiosAjax.java

package com.bjbs.aa;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class AxiosAjax extends HttpServlet {
	private static final long serialVersionUID = 1L;

	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		String id = req.getParameter("id");
		resp.getWriter().write("Axios Ajax get Request...   id = " + id);
	}
	
	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		doGet(req, resp);
	}
}

9.2. 编写AxiosAjaxPost.java

package com.bjbs.aa;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class AxiosAjaxPost extends HttpServlet {
	private static final long serialVersionUID = 1L;

	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		String uname = req.getParameter("uname");
		String pwd = req.getParameter("pwd");
		resp.getWriter().write("Axios Ajax post Request...   uname = " + uname + ", pwd = " + pwd);
	}
	
	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		doGet(req, resp);
	}
}

9.3. 编写AxiosAjaxPostJson.java

package com.bjbs.aa;

import java.io.BufferedReader;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class AxiosAjaxPostJson extends HttpServlet {
	private static final long serialVersionUID = 1L;

	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		BufferedReader br = req.getReader();
		String result = "", rl = null;
		while((rl = br.readLine()) != null) {
			result += rl;
		}
		System.out.println("Axios Ajax post Request Json Param...   result = " + result);
		
		String res = "{\"code\":1,\"result\":\"success.\"}";
		resp.getWriter().write(res);
	}
	
	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		doGet(req, resp);
	}
}

9.4. 编写axios.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>axios基本用法</title>
	</head>
	<body>
		<script type="text/javascript" src="axios.js"></script>
		<script type="text/javascript">
			// 配置请求的基准URL地址
	    	axios.defaults.baseURL = 'http://localhost:8080/Axios';
	    	// 全局设置超时时间
			axios.defaults.timeout = 3000;
	    	// 全局设置请求头信息
	        axios.defaults.headers['mytoken'] = 'aQWd15SFSa67sSD654FS48AT';
		
			axios.get('aa.action?id=123').then(function(ret){
		    	// 注意data属性是固定的用法, 用于获取后台的实际数据
		      	document.write(ret.data + "<br />");
		    });
			
			axios.get('aa.action', {
				params: {
					id: 456
				}
			}).then(function(ret){
		      	document.write(ret.data + "<br />");
		    });
			
			// 传递传统的表单类型的数据
			var params = new URLSearchParams();
			params.append('uname', 'zhangsan');
			params.append('pwd', '123');
			axios.post('aap.action', params).then(function(ret){
		      	document.write(ret.data + "<br />");
		    });
			
			// 默认传递JSON格式数据
			axios.post('aapj.action', {
				uname: 'lisi',
				pwd: 456
			}).then(function(ret){
		      	document.write("code = " + ret.data.code + ", result = " + ret.data.result + "<br />");
		    });
		</script>
	</body>
</html>

9.5. 编写async-await.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>异步请求</title>
	</head>
	<body>
		<script type="text/javascript" src="axios.js"></script>
		<script type="text/javascript">
	        async function queryData() {
	        	var ret = await axios.get('aa.action?id=123');
	        	document.write(ret.data + "<br />");
	        	
	        	ret = await axios.post('aapj.action', {
					uname: 'lisi',
					pwd: 456
				});
	        	document.write("code = " + ret.data.code + ", result = " + ret.data.result + "<br />");
	        };
	        queryData();
		</script>
	</body>
</html>

9.6. 编写interceptors.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>axios拦截器</title>
	</head>
	<body>
		<script type="text/javascript" src="axios.js"></script>
		<script type="text/javascript">
			// 全局设置超时时间
			axios.defaults.timeout = 3000;
		
			// 请求拦截器
	    	axios.interceptors.request.use(function(config) {
	    		console.log(config);
	    		config.headers.mytoken = 'aQWd15SFSa67sSD654FS48AT';
	    		return config;
	    	}, function(err){
	    	      console.log(err);
	        });
			
	    	// 响应拦截器
	    	axios.interceptors.response.use(function(res) {
	    		console.log(res);
	    		return res;
	    	}, function(err){
	    	      console.log(err);
	        });
		
			axios.get('aa.action?id=123').then(function(ret){
		      	document.write(ret.data + "<br />");
		    });
			
			var params = new URLSearchParams();
			params.append('uname', 'zhangsan');
			params.append('pwd', '123');
			axios.post('aap.action', params).then(function(ret){
		      	document.write(ret.data + "<br />");
		    });
		</script>
	</body>
</html>

9.7. 修改web.xml