025_Axios

最新推荐文章于 2023-08-26 17:57:46 发布
最新推荐文章于 2023-08-26 17:57:46 发布
阅读量140 收藏
点赞数
分类专栏： vue 文章标签： vue.js css3 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/aihiao/article/details/122900359
版权

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

9.8. 运行项目, 访问axios.html 

9.9. 运行项目, 访问interceptors.html 

自由与束缚JavaJavaScript
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue设置axios请求接口基址和代理接口地址
weixin_43901550的博客
06-28 1万+
适用于vue-cli3以上版本搭建的项目 一、接口基址（单个接口地址） 如果你的项目只有一个服务器访问地址（接口地址），不调用别的接口地址的话可以直接在src下的main.js中设置axios的默认基址 //main.js中 import axios from 'axios' Vue.prototype.$axios = axios axios.defaults.baseURL='http://localhost:3000';//设置基址 二、代理接口地址 如果你的项目需要访问多个地址，即调用多个不同的接
ajax 基地址设置
岁月流熵，用理智/秩序构建堡垒留存我们的光芒
10-13 887
aiax基地址，简单，易学易使用
css作用域、路由、axios基地址配置与全局调用、momont、filtters过滤器的使用
SilentLand的博客
10-02 720
css作用域、路由、axios基地址配置与全局调用、momont、filtters过滤器的使用
【每日知识】Ajax组成部分了解
qq_46580087的博客
03-17 1160
在人生的道路上，让我们时刻自我激励着吧！永远！永远！
Ajax - axios拦截器 axios基地址 get与post请求区别*
weixin_68531033的博客
05-08 779
axios拦截器的使用 /* axios拦截器工作流程 1. axios 发起请求 2. 执行 请求拦截器 : 添加ajax发送请求之前的操作 3. 服务器 接收、处理、响应 请求 4. 执行 响应拦截器 ： 添加服务器响应之后的操作 4. axios 接收响应(执行then方法) */ //打断点 定时器 ajax 事件处理函数 回调函数 打在函数体内部 /* 1.axios拦截器作...
Web__Axios框架.mp4
07-09
Web__Axios框架.mp4
api_clone_axios
03-26
"api_clone_axios"是一个基于JavaScript的项目，其核心目标是实现一个与axios库功能相似的API克隆。Axios是一款流行的JavaScript库，用于在浏览器和Node.js环境中发起HTTP请求。这个项目可能是为了学习和理解axios的...
16__Axios__Restful.mp4
07-13
16__Axios__Restful.mp4
如何封装一个axios函数_Promises_axios
09-23
手写一个axios函数步骤。在public文件夹中，可以直接调用
react_with_axios
03-15
该项目是通过引导的。 您将在下面找到一些有关如何执行常见任务的信息。 您可以在找到本指南的最新版本。 目录 更新到新版本 Create React App分为两个包： create-react-app是用于创建新项目的全局命令行实用程序...
如何封装axios请求。统一基地址、加载遮罩层、响应参数优化
qq_18816201的博客
07-11 1100
线上体验地址： http://121.43.41.227:82/ 一顿操作后效果如下 vue.config.js加上 main.js里面加上 创建两个按钮分别来演示未封装时，如何发送get和post请求可以看出重复的地方很多，像基地址一样，使用的axios属性一样，响应的数据格式一样，都是{code,message,data}后期如果更新维护会很麻烦 封装一个axios实例，导出去供人使用该工具实现了1. 统一基地址2. 每次发送请求出现加载遮罩层，响应数据后关闭遮罩层3. 优化响应数据格式，降低复
区分axios在开发环境和生产环境的请求基础地址
背心的博客
10-26 1294
区分axios在开发环境和生产环境的请求基础地址
[JavaScript][AJAX]axios拦截器,axios基地址,get与post区别；实现非空判断；e.preventDefault()；事件委托
wusandaofwy的博客
08-27 502
axios拦截器 axios基地址 get与post区别 实现非空判断 逐个判断 利用数组的some方法 为什么要阻止默认事件(e.preventDefault())
axios 二次封装、请求拦截器+响应拦截器、基地址的配置
最新发布
m0_55734628的博客
08-26 464
和浏览器中，专门用于项目中发送请求获取数据。为了请求方便，我们可以将请求地址的基地址【这样就完成了 axios 完整的二次封装。这样就完成了axios简单的二次封装。这样我们就完成了基地址的配置，同时。axios 是一个基于。
一文掌握 axios 基础
小R.的博客
02-09 3177
  最近在公司实习，又到我技术分享了，看了看大家之前分享的，一时想不到分享啥了，发愁ing…   突然想起来最初面实习时，被问过 axios，就来系统的学习一下啦，看有没有什么可以作为分享的，害。 一、axios 是什么   axios是一个基于promise的HTTP 网络请求库，可以作用于浏览器和 node.js中。它是 isomorphic的，即同一套代码可以运行在浏览器和node.js中。   在服务端它使用原生 node.js 的 http模块发送HTTP请求。   在客户端 （浏览器端）使用
VUE：axios配置及接口请求路径api配置
热门推荐
干饭搬砖两不误。
09-01 1万+
关于vue中使用axios请求的配置,注意其中区分Vue2.0和Vue3.0的写法。
前端项目实战211-axios请求地址默认加了本地地址
qq_41632427的博客
11-28 497
前端
axios
ljj07220602的博客
10-05 331
可以解决：1.使得请求的url地址统一管理，2.往一些接口传递headers。3.设置请求拦截器（前端给后端发数据），headers给后端传递相应的token。在vue中下载：npm install axios -S。引入：import axios from ‘axios’Axios是基于promise对ajax的数据封装。4.响应拦截器（后端给前端返回数据）2.创建axios对象。
通过环境变量配置axios的基地址
mz929的博客
07-14 216
可以理解为production环境的镜像， 尽最大可能来模拟产品线上的环境(硬件，网络拓扑结构，数据库数据)下边我们来学习一下它的用法，从而了解环境变量的使用。就是vue项目相关的编译，配置，打包，启动服务相关的配置文件，它的核心在于。的时候会以此文件为配置文件，这个文件中可以定义针对开发环境的环境变量。的时候会以此文件为配置文件，这个文件中可以定义针对开发环境的环境变量。： 在不同的运行环境下，它的值会自动改变。不同的配置文件，从而获取不同的环境变量。在项目运行的过程中，通过不同的命令，能。
"use strict"; import Vue from 'vue'; import axios from "axios"; let config = { }; const _axios = axios.create(config); _axios.interceptors.request.use( function(config) { return config; }, function(error) { return Promise.reject(error); } ); _axios.interceptors.response.use( function(response) { return response; }, function(error) { return Promise.reject(error); } ); Plugin.install = function(Vue, options) { Vue.axios = _axios; window.axios = _axios; Object.defineProperties(Vue.prototype, { axios: { get() { return _axios; } }, $axios: { get() { return _axios; } }, }); }; Vue.use(Plugin) export default Plugin;
06-10
这段代码是一个 Vue 插件，它将 axios 库与 Vue 框架集成...同时，插件还通过 Object.defineProperties 方法将 axios 实例挂载到 Vue 实例的原型上，以便在组件中可以通过 this.axios 或 this.$axios 访问 axios 实例。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值