怎么调用后端的接口（看这篇准没错）

已于 2022-10-18 12:12:31 修改
阅读量2.9k 收藏 18
点赞数 3
分类专栏： 细支 文章标签： ajax axios fetch
于 2022-05-02 02:53:19 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44242181/article/details/124532442
版权

王元肉==>个人主页

大家一起加油，我喜欢分专栏将知识打碎成一份一份小知识点，一篇文章只说一个知识点，因此每篇文章篇幅较短，希望大家不要介意。如有需要可以查看专栏看看是否有该文章中涉及到的知识点进行讲解的文章，如果大家觉得有帮助，希望大家三连支持一下。
推荐阅读

文章结构

AJAX

AJAX是什么？

anync javascript and xml
异步js和xml
浏览器向服务器发送异步请求，无刷新获取数据

XML是什么？

与HTML类似，但是没有预定义的标签，标签全都是自己定义的，都是成对的标签

<student>
	<name>zhangsan</name>
	<age>20</age>
</student>

但是现在已经被JSON替代了，JSON格式更加的简洁

javascript{"name":"zhangsan","age":20}

AJAX的特点

AJAX的优点

1、无需刷新页面与服务器端进行通信
2、更新部分页面的内容

AJAX的缺点

1、没有浏览历史，不能回退
2、存在跨域问题
3、seo对爬虫不友好，爬虫爬取不到页面的内容

使用express起一个本地的后端，用来测试AJAX和Jquery以及fetch发送请求

const express = require('express');

const app = express();

app.get('/server', (req, res) => {
	// 设置响应头,允许跨域
	res.setHeader('Access-Control-Allow-Origin', '*');
	// 设置响应体
	res.send('Hello Ajax GET ');
});

app.post('/server', (req, res) => {
	// 设置响应头,允许跨域
	res.setHeader('Access-Control-Allow-Origin', '*');
	// 设置响应体
	res.send('Hello Ajax POST ');
})

// 不管是什么请求都可以响应
app.all('/server-json', (req, res) => {
	// 设置响应头,允许跨域
	res.setHeader('Access-Control-Allow-Origin', '*');
	let person = {
		name: 'zhangsan',
		age: 18
	}

	person = JSON.stringify(person);
	// 设置响应体
	res.send(person);
})

// ie缓存
app.all('/server-ie', (req, res) => {
	// 设置响应头,允许跨域
	res.setHeader('Access-Control-Allow-Origin', '*');
	let person = {
		name: 'zhangsan',
		age: 19
	}

	person = JSON.stringify(person);
	// 设置响应体
	res.send(person);
})

// 网络延迟-手动取消请求-节流
app.all('/delay', (req, res) => {
	// 设置响应头,允许跨域
	res.setHeader('Access-Control-Allow-Origin', '*');
	// 设置响应体
	setTimeout(function() {
		res.send('网络延迟');
	},3000);
})

// ajax发送请求
app.all('/ajax', (req, res) => {
	// 设置响应头,允许跨域
	res.setHeader('Access-Control-Allow-Origin', '*');
	// 设置响应头，可以自定义头部信息
	res.setHeader('Access-Control-Allow-Headers', '*');
	// 设置响应体
	let message = {mag:'请求成功'}
	res.send(JSON.stringify(message));
})

// fetch发送请求
app.all('/fetch', (req, res) => {
	// 设置响应头,允许跨域
	res.setHeader('Access-Control-Allow-Origin', '*');
	// 设置响应头，可以自定义头部信息
	res.setHeader('Access-Control-Allow-Headers', '*');
	// 设置响应体
	let message = {mag:'请求成功'}
	res.send(JSON.stringify(message));
})

app.listen(80, () => {
	console.log('服务器启动成功');
});

在这里插入图片描述

使用AJAX发送请求

发送GET请求

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<style type="text/css">
			#result {
				width: 200px;
				height: 200px;
				border: 1px solid black;
			}
		</style>
	</head>
	<body>
		<button type="button">点击发送请求</button>
		<div id="result"></div>
		<script type="text/javascript">
			const btn = document.querySelector('button');
			const result = document.querySelector('#result');
			btn.onclick = function(){
				// 发送ajax请求
				// 1、创建对象
				const xhr = new XMLHttpRequest();
				// 请求参数
				let params = null;
				// 2、初始化
				xhr.open('GET','http://localhost/server?'+params);
				// 3、发送
				xhr.send();
				// 4、事件绑定onload不兼容ie6
				// on when 当...的时候
				// readystate 是xhr对象的属性，表示状态0 1 2 3 4
				xhr.onreadystatechange = function(){
					// 判断响应数据是否全部返回
					if(xhr.readyState === 4){
						// 判断响应状态码 200 404 403 401 500
						// 2xx 成功
						if(xhr.status >= 200 && xhr.status < 300){
							// 处理结果 行 头 空行 体
							// console.log(xhr.status);//状态码
							// console.log(xhr.statusText);//状态字符串
							// console.log(xhr.getAllResponseHeaders());//所有的响应头
							// console.log(xhr.response);//响应体
							// 设置result的文本,字符串
							result.innerHTML = xhr.responseText;
						}else {
							
						}
					}
				}
			}
		</script>
	</body>
</html>

在这里插入图片描述

发送POST请求

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<style type="text/css">
			#result {
				width: 200px;
				height: 200px;
				border: 1px solid black;
			}
		</style>
	</head>
	<body>
		<button type="button">点击发送请求</button>
		<div id="result"></div>
		<script type="text/javascript">
			const btn = document.querySelector('button');
			const result = document.querySelector('#result');
			btn.onclick = function(){
				// 发送ajax请求
				// 1、创建对象
				const xhr = new XMLHttpRequest();
				// 请求参数
				let params = null;
				// 2、初始化
				xhr.open('POST','http://localhost/server');
				// 设置请求头，必须在open和send之间,设置请求参数的类型
				xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
				// 3、发送
				xhr.send(params);
				// 4、事件绑定onload不兼容ie6
				// on when 当...的时候
				// readystate 是xhr对象的属性，表示状态0 1 2 3 4
				xhr.onreadystatechange = function(){
					// 判断响应数据是否全部返回
					if(xhr.readyState === 4){
						// 判断响应状态码 200 404 403 401 500
						// 2xx 成功
						if(xhr.status >= 200 && xhr.status < 300){
							// 处理结果 行 头 空行 体
							// console.log(xhr.status);//状态码
							// console.log(xhr.statusText);//状态字符串
							// console.log(xhr.getAllResponseHeaders());//所有的响应头
							// console.log(xhr.response);//响应体
							// 设置result的文本,字符串
							result.innerHTML = xhr.responseText;
						}else {
							
						}
					}
				}
			}
		</script>
	</body>
</html>

在这里插入图片描述

接收服务器端发送的JSON格式数据

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <style type="text/css">
        #result {
            width: 200px;
            height: 200px;
            border: 1px solid black;
        }
    </style>
</head>

<body>
    <button type="button">点击发送请求</button>
    <div id="result"></div>
    <script type="text/javascript">
        const btn = document.querySelector('button');
        const result = document.querySelector('#result');
        btn.onclick = function() {
            // 发送ajax请求
            // 1、创建对象
            const xhr = new XMLHttpRequest();
            // 请求参数
            let params = null;
            // 2、初始化
            xhr.open('GET', 'http://localhost/server-json?' + params);
            // 设置响应体数据类型
            xhr.responseType = 'json';
            // 3、发送
            xhr.send();
            // 4、事件绑定onload不兼容ie6
            // on when 当...的时候
            // readystate 是xhr对象的属性，表示状态0 1 2 3 4
            xhr.onreadystatechange = function() {
                // 判断响应数据是否全部返回
                if (xhr.readyState === 4) {
                    // 判断响应状态码 200 404 403 401 500
                    // 2xx 成功
                    if (xhr.status >= 200 && xhr.status < 300) {
                        // 处理结果 行 头 空行 体
                        // console.log(xhr.status);//状态码
                        // console.log(xhr.statusText);//状态字符串
                        // console.log(xhr.getAllResponseHeaders());//所有的响应头
                        // console.log(xhr.response);//响应体
                        // 接收服务器返回的JSON数据

                        // // 手动转换
                        // let person = JSON.parse(xhr.responseText);

                        // 自动转换，设置返回数据的格式即可xhr.responseType = 'json';
                        // 设置result的文本,字符串
                        // result.innerHTML = person.name;
                        result.innerHTML = xhr.response.age + "-" + xhr.response.name;
                    } else {

                    }
                }
            }
        }
    </script>
</body>

</html>

在这里插入图片描述

ie浏览器的缓存问题，ajax数据更新，ie记录原有数据

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <style type="text/css">
        #result {
            width: 200px;
            height: 200px;
            border: 1px solid black;
        }
    </style>
</head>

<body>
    <button type="button">点击发送请求</button>
    <div id="result"></div>
    <script type="text/javascript">
        var btn = document.getElementsByTagName('button')[0];
        var result = document.getElementById('#result');
        btn.onclick = function() {
            // 发送ajax请求
            // 1、创建对象
            var xhr = new XMLHttpRequest();
            // 2、初始化
            // 给请求加一个时间戳，这样再次发送ajax请求时，ie会认为不是同一个请求，会重新发送请求，从而接收到服务器端可能已经发生改变的数据
            xhr.open('GET', 'http://localhost/server-ie?t=' + new Date());
            // 设置响应体数据类型
            xhr.responseType = 'json';
            // 3、发送
            xhr.send();
            // 4、事件绑定onload不兼容ie6
            // on when 当...的时候
            // readystate 是xhr对象的属性，表示状态0 1 2 3 4
            xhr.onreadystatechange = function() {
                // 判断响应数据是否全部返回
                if (xhr.readyState === 4) {
                    // 判断响应状态码 200 404 403 401 500
                    // 2xx 成功
                    if (xhr.status >= 200 && xhr.status < 300) {
                        // 处理结果 行 头 空行 体
                        // console.log(xhr.status);//状态码
                        // console.log(xhr.statusText);//状态字符串
                        // console.log(xhr.getAllResponseHeaders());//所有的响应头
                        // console.log(xhr.response);//响应体
                        // 接收服务器返回的JSON数据

                        // // 手动转换
                        // let person = JSON.parse(xhr.responseText);

                        // 自动转换，设置返回数据的格式即可xhr.responseType = 'json';
                        // 设置result的文本,字符串
                        // result.innerHTML = person.name;
                        console.log(xhr.response);
                    } else {

                    }
                }
            }
        }
    </script>
</body>

</html>

在这里插入图片描述

Ajax请求超时，网络异常

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<style type="text/css">
			#result {
				width: 200px;
				height: 200px;
				border: 1px solid black;
			}
		</style>
	</head>
	<body>
		<button type="button">点击发送请求</button>
		<div id="result"></div>
		<script type="text/javascript">
			const btn = document.getElementsByTagName('button')[0];
			const result = document.getElementById('#result');
			btn.onclick = function(){
				// 发送ajax请求
				// 1、创建对象
				const xhr = new XMLHttpRequest();
				// 2、初始化
				// 超时设置,浏览器network中请求会取消
				xhr.timeout = 2000;
				// 超时回调
				xhr.ontimeout = function(){
					alert('网络延迟，稍后重试');
				}
				// 网络异常回调，用谷歌浏览器的Network中的网络状态改为Offline
				xhr.onerror = function(){
					alert('断网了');
				}
				xhr.open('GET','http://localhost/delay');
				// 3、发送
				xhr.send();
				// 4、事件绑定onload不兼容ie6
				// on when 当...的时候
				// readystate 是xhr对象的属性，表示状态0 1 2 3 4
				xhr.onreadystatechange = function(){
					// 判断响应数据是否全部返回
					if(xhr.readyState === 4){
						// 判断响应状态码 200 404 403 401 500
						// 2xx 成功
						if(xhr.status >= 200 && xhr.status < 300){
							// 处理结果 行 头 空行 体
							// console.log(xhr.status);//状态码
							// console.log(xhr.statusText);//状态字符串
							// console.log(xhr.getAllResponseHeaders());//所有的响应头
							// console.log(xhr.response);//响应体
							// 接收服务器返回的JSON数据
							
							// // 手动转换
							// let person = JSON.parse(xhr.responseText);
							
							// 自动转换，设置返回数据的格式即可xhr.responseType = 'json';
							// 设置result的文本,字符串
							// result.innerHTML = xhr.response;
							console.log(xhr.response);
						}else {
							
						}
					}
				}
			}
		</script>
	</body>
</html>

在这里插入图片描述

手动取消请求

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	</head>
	<body>
		<button type="button">点击发送请求</button>
		<button type="button">点击取消请求</button>
		<script type="text/javascript">
			const btn = document.querySelectorAll('button');
			let xhr = null;
			btn[0].onclick = function(){
				xhr = new XMLHttpRequest();
				xhr.open('GET','http://localhost/delay');
				xhr.send();
				xhr.onreadystatechange = function(){
					if(xhr.readyState === 4){
						if(xhr.status >= 200 && xhr.status < 300){
							console.log(111);
						}
					}
				}
			}
			
			btn[1].onclick = function(){
				xhr.abort();
			}
		</script>
	</body>
</html>

在这里插入图片描述

节流-避免重复发送ajax请求

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	</head>
	<body>
		<button type="button">点击发送请求</button>
		<button type="button">点击取消请求</button>
		<script type="text/javascript">
			const btn = document.querySelectorAll('button');
			let xhr = null;
			let flag = false;
			btn[0].onclick = function(){
				if(flag) xhr.abort();
				flag = true;
				xhr = new XMLHttpRequest();
				xhr.open('GET','http://localhost/delay');
				xhr.send();
				xhr.onreadystatechange = function(){
					if(xhr.readyState === 4){
						flag = false;
						if(xhr.status >= 200 && xhr.status < 300){
							console.log(111);
						}
					}
				}
			}
			
			btn[1].onclick = function(){
				xhr.abort();
			}
		</script>
	</body>
</html>

在这里插入图片描述

使用jquery发送请求

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<script src="./jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<button type="button">点击发送GET请求</button>
		<button type="button">点击发送POST请求</button>
		<button type="button">通用性方法</button>
		<script type="text/javascript">
			$('button').eq(0).click(function(){
				$.get('http://localhost/jquery',{a:10,b:20},function(data){
					// data就是响应体
					console.log(data);
				},'json')
			})
			$('button').eq(1).click(function(){
				$.post('http://localhost/jquery',{a:10,b:20},function(data){
					console.log(data);
				})
			})
			$('button').eq(2).click(function(){
				$.ajax({
					// url
					url: "http://127.0.0.1/jquery",
					// 请求参数
					data: {a:10,b:20},
					// 请求类型
					type: "GET",
					// 响应体格式
					dataType: "json",
					// 成功的回调
					success: function(data){
						console.log(data);
					},
					// 超时时间,超过这个时间还没有接收到服务器端的响应就会请求失败
					timeout: 2000,
					// 失败的回调,可以将路径指向delay模拟失败
					error: function(){
						console.log('出错了');
					},
					// 头部信息，记得设置响应头可以自定义头部信息
					headers: {
						a:300,
						b:100
					}
				})
			})
		</script>
	</body>
</html>

在这里插入图片描述

使用fetch发送请求

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	</head>
	<body>
		<button type="button">fetch发送请求</button>
		<script type="text/javascript">
			const btn = document.querySelector('button');
			btn.onclick = function(){
				fetch('http://localhost/fetch?id=1',{
					method: 'POST',
					headers: {
						id:1,
						vip:7
					},
					// body可以发送params格式，json格式
					body: 'username=admin&password=123456'
				}).then(response => {
					// return response.text()
					return response.json()
				}).then(value => console.log(value))
			}
		</script>
	</body>
</html>

在这里插入图片描述

使用json-server模拟后端来测试axios发送请求

json-server npm源地址
db.json

{
    "posts": [{
            "id": 1,
            "title": "json-server",
            "author": "typicode"
        },
        {
            "title": "今天天气不错, 还挺风和日丽的",
            "author": "张三",
            "id": 2
        },
        {
            "title": "今天天气不错, 还挺风和日丽的",
            "author": "张三",
            "id": 3
        }
    ],
    "comments": [{
            "id": 1,
            "body": "some comment",
            "postId": 1
        },
        {
            "body": "喜大普奔",
            "postId": 2,
            "id": 2
        }
    ],
    "profile": {
        "name": "typicode"
    }
}

在这里插入图片描述

使用axios发送请求

axios中文网

axios的基本使用

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>axios基本使用</title>
    <link crossorigin="anonymous" href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
</head>
<body>
    <div class="container">
        <h2 class="page-header">基本使用</h2>
        <button class="btn btn-primary"> 发送GET请求 --请求id为2的数据 </button>
        <button class="btn btn-warning" > 发送POST请求 --添加一条数据 </button>
        <button class="btn btn-success"> 发送PUT请求 --将id为3的author改为李四 </button>
        <button class="btn btn-danger"> 发送DELETE请求 --将id为3的数据删除 </button>
    </div>
    <script>
        //获取按钮
        const btns = document.querySelectorAll('button');

        //第一个
        btns[0].onclick = function(){
            //发送 AJAX 请求
            axios({
                //请求类型
                method: 'GET',
                //URL
                url: 'http://localhost:3000/posts/2',
            }).then(response => {
                console.log(response);
            });
        }

        //添加一篇新的文章
        btns[1].onclick = function(){
            //发送 AJAX 请求
            axios({
                //请求类型
                method: 'POST',
                //URL
                url: 'http://localhost:3000/posts',
                //设置请求体
                data: {
                    title: "今天天气不错, 还挺风和日丽的",
                    author: "张三"
                }
            }).then(response => {
                console.log(response);
            });
        }

        //更新数据
        btns[2].onclick = function(){
            //发送 AJAX 请求
            axios({
                //请求类型
                method: 'PUT',
                //URL
                url: 'http://localhost:3000/posts/3',
                //设置请求体
                data: {
                    title: "今天天气不错, 还挺风和日丽的",
                    author: "李四"
                }
            }).then(response => {
                console.log(response);
            });
        }

        //删除数据
        btns[3].onclick = function(){
            //发送 AJAX 请求
            axios({
                //请求类型
                method: 'delete',
                //URL
                url: 'http://localhost:3000/posts/3',
            }).then(response => {
                console.log(response);
            });
        }

    </script>
</body>

</html>

在这里插入图片描述

axios的其它使用

axios.request(config)
axios.get(url[, config])
axios.delete(url[, config])
axios.head(url[, config])
axios.options(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])

axios的默认配置

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>axios默认配置</title>
    <link crossorigin="anonymous" href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
</head>

<body>
    <div class="container">
        <h2 class="page-header">基本使用</h2>
        <button class="btn btn-primary"> 发送请求 </button>
    </div>
    <script>
        //获取按钮
        const btns = document.querySelectorAll('button');
        //默认配置
        axios.defaults.method = 'GET'; //设置默认的请求类型为 GET
        axios.defaults.baseURL = 'http://localhost:3000'; //设置基础 URL
        axios.defaults.params = {
            id: 1
        };
        // axios请求超过时间阀之后自动取消请求
        axios.defaults.timeout = 3000; //

        btns[0].onclick = function() {
            axios({
                url: '/posts'
            }).then(response => {
                console.log(response);
            })
        }
    </script>
</body>

</html>

在这里插入图片描述

axios创建实例对象

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>axios实例对象</title>
    <link crossorigin="anonymous" href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
</head>

<body>
    <script>
        //获取按钮
        const btns = document.querySelectorAll('button');

        //创建实例对象  /getJoke
        const duanzi = axios.create({
            baseURL: 'http://localhost:3000',
            timeout: 2000
        });

        const onather = axios.create({
            baseURL: 'http://localhost:3000',
            timeout: 2000
        });

        duanzi({
            url: '/comments',
        }).then(response => {
            console.log(response);
        });

        onather.get('/profile').then(response => {
            console.log(response.data)
        })
    </script>
</body>

</html>

在这里插入图片描述

axios拦截器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>拦截器</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
</head>
<body>
    <script>
        // Promise
        // 设置请求拦截器  config 配置对象
        axios.interceptors.request.use(function (config) {
            console.log('请求拦截器 成功 - 1号');
            //修改 config 中的参数
            config.params = {a:100};

            return config;
        }, function (error) {
            console.log('请求拦截器 失败 - 1号');
            return Promise.reject(error);
        });

        axios.interceptors.request.use(function (config) {
            console.log('请求拦截器 成功 - 2号');
            //修改 config 中的参数
            config.timeout = 2000;
            return config;
        }, function (error) {
            console.log('请求拦截器 失败 - 2号');
            return Promise.reject(error);
        });

        // 设置响应拦截器
        axios.interceptors.response.use(function (response) {
            console.log('响应拦截器 成功 1号');
            return response.data;
            // return response;
        }, function (error) {
            console.log('响应拦截器 失败 1号')
            return Promise.reject(error);
        });

        axios.interceptors.response.use(function (response) {
            console.log('响应拦截器 成功 2号')
            return response;
        }, function (error) {
            console.log('响应拦截器 失败 2号')
            return Promise.reject(error);
        });

        //发送请求
        axios({
            method: 'GET',
            url: 'http://localhost:3000/posts'
        }).then(response => {
            console.log('自定义回调处理成功的结果');
            console.log(response);
        });
    </script>   
</body>
</html>

在这里插入图片描述

axios取消请求

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>取消请求</title>
    <link crossorigin='anonymous' href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
</head>

<body>
    <div class="container">
        <h2 class="page-header">axios取消请求</h2>
        <button class="btn btn-primary"> 发送请求 </button>
        <button class="btn btn-warning"> 取消请求 </button>
    </div>
    <script>
        //获取按钮
        const btns = document.querySelectorAll('button');
        //2.声明全局变量
        let cancel = null;
        //发送请求
        btns[0].onclick = function() {
            //检测上一次的请求是否已经完成
            if (cancel !== null) {
                //取消上一次的请求
                cancel();
            }
            axios({
                method: 'GET',
                // 使用之前的express来测试
                url: 'http://localhost/delay',
                //1. 添加配置对象的属性
                cancelToken: new axios.CancelToken(function(c) {
                    //3. 将 c 的值赋值给 cancel
                    cancel = c;
                })
            }).then(response => {
                console.log(response);
                //将 cancel 的值初始化
                cancel = null;
            })
        }

        //绑定第二个事件取消请求
        btns[1].onclick = function() {
            cancel();
        }
    </script>
</body>

</html>

在这里插入图片描述

在这里插入图片描述
结束啦！

LiuJie_Boom
关注
  • 3
    点赞
  • 踩
  • 18
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
调用后端的接口
qq_45684708的博客
12-23 2867
1、查看后端的接口 2、在axios目录下的api.js文件里获取后端的接口（每个接口写发都差不多，只要改接口名称就好 如：getNotice） export const getNotice = (query, tenantkey_A, tenantid_A, username) => { //获取通知消息 let time_A = getTime() let sha_A = hex_sha1("/v1/user/getNotice" + tenantkey_A + time_A) re
Vue调用后端java接口的实例代码
01-19
前段时间 做了个学校的春萌项目，其中用到vue连接后端java接口。 先上后端接口代码： package controller; import net.sf.json.JSONObject; import util.DBUtil; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.se
前端如何使用后端提供的接口拿数据，文件配置及详细使用
m0_61663332的博客
01-06 7226
前端如何使用后端提供的接口，怎么通过后端返回的数据渲染页面，通过vuex和localstorage对用户登录后的token进行持久化处理，通过携带登陆成功的token获取后端的值
Postman测试工具调试接口详细教程【向后端发送Json数据并接收返回的Json结果】
最新发布
2401_84563605的博客
05-10 459
Postman是一个接口测试工具,在做接口测试的时候,Postman相当于一个客户端,它可以模拟用户发起的各类HTTP请求,将请求数据发送至服务端,获取对应的响应结果, 从而验证响应中的结果数据是否和预期值相匹配;并确保开发人员能够及时处理接口中的bug,进而保证产品上线之后的稳定性和安全性。等等),Postman与浏览器的区别在于有的浏览器不能输出Json格式,而Postman更直观接口返回的结果。更为方便的调试接口，为前后端分离提供良好的保障，便于后端开发人员调试测试接口，大大提升了开发效率。
小白一看就懂的前后端接口连接
像鱼的博客
02-25 2万+
作为刚入职的小白，总是听前辈们说“连接口很简单的 ，一看就懂”，由于鄙人实在是才疏学浅，实在是绕的头晕眼花，不知道怎么肥事。于是耐心用一下午仔细研究每一句代码，研究他们之间的联系，反复确认，总结如下： 前后端连接用到两种文件形式：wxml 文件, js文件 准备工作：请打开本文件的 js 文件， api 下本文件涉及的接口文件 （例：登录页面，打开 api --> login.js文件）， api下request文件 第一步：将后端给的局域网请求地址 复制 到 request.js 文..
前端如何调用后端接口进行数据交互（极简）
热门推荐
weixin_43005654的博客
03-18 6万+
axios，前后端数据交互，数据渲染，发请求，axjax
小程序基本命令
aiven1637的博客
10-30 3284
onLoad: function () { // 生命周期函数--监听页面加载 onReady: function () { // 生命周期函数--监听页面初次渲染完成 }, onShow: function () { // 生命周期函数--监听页面显示 }, onHide: function () { // 生命周期函数--监...
后端接口文档例子 word
03-18
"后端接口文档详解" 在本文档中，我们将详细介绍后端接口文档的编写，特别是Java接口文档的编写。通过本文档，我们将了解后端接口文档的重要性、编写格式、请求参数、返回参数等方面的知识点。 一、为什么需要后端...
后端接口调试软件
12-13
根据描述中提供的链接，虽然没有具体提及哪款软件，但通常这类链接指向可能是某种共享或下载资源，可能是像Postman、Insomnia、 Paw、HTTPie等知名的后端接口调试工具。这些工具都拥有强大的功能，能够满足上述提到...
springboot/web项目优秀的后端接口体系，看一篇就够了
01-20
springboot/web项目优秀的后端接口体系，看一篇就够了 项目构建-统一参数校验，统一结果响应，统一异常处理，统一错误处理，统一日志记录,统一生成api文档 1. 前言 一个后端接口大致分为四个部分组成：接口地址（url...
创建spring cloud项目后端代码中的服务调用接口
g13197895299的博客
10-30 677
在微服务项目中多多少少都会遇到服务间的调用，例如服务A中需要使用服务B中的某个功能接口，如果是在前端，可以直接发起一个请求就可以调用这个功能接口返回结果，但后端都会选择创建一个服务调用接口类来请求其它服务的请求地址。至于具体的内容，可以直接复制被调用服务中的接口方法，去掉方法体就好。fallback值，指的是该接口的回调类，该类一般都是实现了该接口的类，其中对每个请求方法都设定的回调方法；名称一般XXXFeignFallBack，创建的回调类，直接继承并实现相应的接口类，在方法中写回调的操作。
Java后台调用第三方接口
weixin_42087031的博客
01-06 4813
前言 大家好，我是南城、有潇湘，一个有点文学气息的Java小白，如果我得文章对您有所帮助，不胜荣幸！！！ 项目场景： 当我们进行微信小程序开发的时候,有时候避免不了需要去和其他项目进行对接,去调用其他项目的接口,但是由于微信小程序规则的限制,前端没办法访问外部链接,这个时候就需要后端对接口进行处理之后将数据交给前端. 问题描述： ①后端如何调用外部接口? ②如何在第三方接口有权限认证的情况下动态处理? # 问题分析： ①首先我们确定一下我们需要什么以及我们有什么和没有什么,我们需要的是接口返回的数据,
jsp页面中JSTL/EL标签引用java后台静态static字段的方法总结
rongge2008的专栏
04-16 872
为什么使用该功能？ 项目中的每个页面都包含产品名称、Logo、版本等信息，我希望修改一处，其它所有的全部跟着变。  有同学会说那就都引用一个页面“”就Ok了；但是我希望这些信息都是可以通过后台代码修改的，修改后保存到数据库和一个静态类中；其实后台直接读写这个引用 的页面或者保存到属性文件（properties）中也是可以的，我觉得还是存到数据库中好一些。  还有同学会说直接使用“”就
后台接口提供的调用方法类型
认知 行动 坚持
10-14 1万+
作为一个后台服务，目的就是对外提供接口， 下面来说说后台接口提供的调用方法类型：        1.  直接提供接口， 调用方要进行socket编程来调用。 对主调放来说， 麻烦。        2.  直接提供接口， 并且提供调用的api, 把api给主调方， 主调方直接进行本地调用， 在这个本地调用中封装了socket操作。 对主调方来说， 比较爽， 如：             int
一个后端项目调用另一个后端项目的接口获取数据
m0_54355172的博客
07-28 5409
本文主要讲述的是，一个后端项目B请求另一个后端项目A的接口，并获取项目A的数据库中的数据的流程，本文提供了完整的配置类和工具类，是经过亲测的代码
vue使用后端提供的接口
忧郁的蛋的专栏
04-07 1151
在VUE中使用后端接口可通过以下步骤实现：安装 axios 库并导入。使用 axios 对象创建 http 请求，如 get 或 post。使用 data 选项传递数据。处理响应，使用 data 属性访问后端返回的数据。使用 vuex 管理从后端获取的数据，通过组件访问。
Vue学习笔记之Vue调用后端API基本配置
weixin_46006743的博客
10-26 1045
Vue学习之后端API调用。
后端接口并行调用方案
BUG指挥课堂
05-19 2186
1. 一个串行调用的例子 如果让你设计一个APP首页查询的接口，它需要查用户信息、需要查banner信息、需要查标签信息等等。一般情况，小伙伴会实现如下： publicAppHeadInfoResponsequeryAppHeadInfo(AppInfoReqreq){ //查用户信息 UserInfoParamuserInfoParam=buildUserParam(req); UserInfoDTOuserInfoDTO=userService.quer......
Java 调用第三方接口方法
一直在水些技术小文
07-29 2307
1、通过统一资源定位器（java.net.URL）获取连接器（java.net.URLConnection）。4、以输入流的形式获取返回内容。2、设置请求的参数。
前端如何调用后端接口？
07-24
前端可以通过以下几种方式调用后端接口： 1. 使用原生的JavaScript：前端可以使用`XMLHttpRequest`或`fetch`对象来发送HTTP请求并获取后端接口的响应数据。这需要手动处理请求和响应的过程。 2. 使用第三方库：...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

LiuJie_Boom

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值