关键词：
前端后端交互axios
前言
Axios 是一个基于 promise(异步实现) 的 HTTP 库，可以用在浏览器和 node.js 中使用，原生的js或者使用jquery来发生请求进行前后端数据交互，代码写起来过于复杂。
axios的使用
安装axios
- 方式一
npm install axios
- 方式二
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
axios发送get请求
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<script type="text/javascript">
const request= axios.get('http://127.0.0.1:5000/api/projects')
// 请求成功时（响应状态码为2系列）会执行then方法传入的回调函数
request.then(function (response)
console.log(response)
)
// 当请求失败，会执行catch方法传入回调函数
res1.catch(function (error)
console.log(error)
console.log(error.response)
)
// 也可以直接使用链式调用
axios.get('http://127.0.0.1:5000/api/projects').then(function (response)
console.log(response)
).catch(function (error)
console.log(error);
console.log(error.response)
)
</script>
</body>
</html>
get请求带参数
- 方式一：参数直接放在url中
// 把请求参数直接放在url中
const res = axios.get('http://127.0.0.1:5000/api/pro_list?name=musen')
- 方式二：使用params进行传递
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<script type="text/javascript">
// 链式调用
axios.get("http://127.0.0.1:5000/api/interface",
// 查询字符串参数传递
params:
id: 1001
).then(function (response)
// 请求成功时执行
console.log('res', response)
// 获取响应状态码
console.log(response.status)
// 获取响应数据
console.log(response.data)
// 请求失败时执行
).catch(function (error)
console.log(error);
console.log(error.response)
)
</script>
</body>
</html>
发送post请求
- 传递json格式的参数
const res1 = axios.post('http://127.0.0.1:5000/api/user/login',
pwd: 'lemonban',user: 'python01'
)
- 传递表单类型的参数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<script type="text/javascript">
// 构建一个表单参数对象
var params = new URLSearchParams()
params.append('user', 'python')
params.append('pwd', 'lemonban')
axios.post('http://127.0.0.1:5000/api/user/login', params)
// console.log(res1)
</script>
</body>
</html>
全局axios配置
- 配置基本的host地址
axios.defaults.baseURL ='https://api.example.com'
- 配置请求头信息
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<script type="text/javascript">
// 全局的请求配置信息
axios.defaults.baseURL ='http://127.0.0.1:5000'
axios.defaults.headers.common['Authorization'] = 'test'
// 链式调用
axios.get("/api/interface",
// 查询字符串参数传递
params:
id: 1001
,
).then(function (response)
// 请求成功时执行
console.log('res', response)
// 获取响应状态码
console.log(response.status)
// 获取响应数据
console.log(response.data)
// 请求失败时执行
).catch(function (error)
console.log(error);
console.log(error.response)
)
</script>
</body>
</html>
多服务场景调用
在日常项目中，我们可能会遇到一个项目需要调用多个服务的接口，那么我们可以创建axios实例对象进行调用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<script type="text/javascript">
// 针对多个后端服务的场景
const requestA = axios.create(
baseURL: "http://127.0.0.1:5000",
headers: "test": 111
)
const requestB = axios.create(
baseURL: "http://127.0.0.1:6000"
)
// 链式调用
requestA.post("/api/interface",
// 查询字符串参数传递
params:
id: 1001
,
).then(function (response)
// 请求成功时执行
console.log('res', response)
).catch(function (error)
console.log(error);
console.log(error.response)
)
// 链式调用
requestB.post("/api/interface",
// 查询字符串参数传递
params:
id: 1001
,
).then(function (response)
// 请求成功时执行
console.log('res', response)
).catch(function (error)
console.log(error);
console.log(error.response)
)
</script>
</body>
</html>
后端鉴权的接口处理
假设我们有些接口需要鉴权，那么可以使用如下方法，获取token信息
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<script type="text/javascript">
const requestB = axios.create(
baseURL: "http://47.112.233.130:8888",
)
requestB.post('/users/login',
username: "yushaoqi",
password: '12345',
)
.then(function (response)
console.log(response);
// 提取token
let token = response.data.token
// 保存token到localStorage
window.localStorage.setItem('token', token)
// 保存到sessionStorage中，关闭浏览器之后，token会被清空
// window.sessionStorage.setItem('token', token)
)
.catch(function (error)
console.log(error.response)
)
requestB.post('project/',
// 接口2依赖token处理
headers:
Authorization: 'Bearer' + window.localStorage.getItem('token')
).then(function (response)
console.log(response)
).catch(function (error)
console.log(error.response)
)
</script>
</body>
</html>
axios请求拦截器
前面我们请求鉴权接口的时候，每个接口都需要在其中写入token，如果只是单个接口还好，但是随着我们项目越来越庞大，几乎所有接口都需要用到token，那们我们可以把这个条件判断抽离出来。这里可以用到请求拦截器：
下面我们仍然结合登录接口，来实现案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测开平台</title>
<script src='./vue.js'></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<style type="text/css">
.login
width: 600px;
height: 400px;
box-shadow: 0 0 15px #000000;
margin: 150px auto;
/*设置圆角*/
border-radius: 5px;
/*内容居中*/
text-align: center;
.title
color: #00aaff;
font: bold 24px/30px "microsoft sans serif";
padding: 50px 0;
/*设置输入框的样式*/
.login input
width: 70%;
height: 35px;
margin-bottom: 30px;
border: solid 1px #d1d1d1;
padding: 0;
border-radius: 3px;
/*设置input键盘输入时，边框的样式*/
.login input:focus
outline: none;
border: solid 1px #ffaa00;
/*设置按钮样式*/
.login input[type='submit']
background: #00AAFF;
color: #fff;
</style>
</head>
<body>
<div id="app">
<div class="login">
<div class="title">接 口 自 动 化 平 台</div>
<form action="">
<input type="text" v-model="loginForm.user" placeholder=" 请输入用户名">
<input type="password" v-model="loginForm.pwd" placeholder=" 请输入密码">
<input type="button" @click="login" value="登录"/>
</form>
</div>
<hr>
<table border="" cellspacing="" cellpadding="">
<tr>
<th>ID</th>
<th>项目名称</th>
<!-- <th>负责人</th>-->
<!-- <th>描述信息</th>-->
</tr>
<tr :key="item.id" v-for="item in projects ">
<td>item.id</td>
<td>item.title</td>
</tr>
</table>
</div>
<script type="text/javascript">
const requestB =axios前后端交互工具学习(代码片段)
文章目录Axios前后端交互工具学习引言引入Axios介绍GET请求的方式then方法catch方法POST请求的方式PUT请求的方式Axios的基本配置Axios的拦截器Vue怎么和Axios配合呢？Axios前后端交互工具学习引言 Axios是一个异步请求技术，... 查看详情
测开之内存管理篇・《内存管理机制》(代码片段)
内存管理机制内存管理机制引用计数机制数据池和缓存小整数池Intern机制缓存机制垃圾回收机制引用计数标记清除分代回收机制内存管理机制在python中创建对象的时候，首先会去申请内存地址，然后对这个对象进行初始... 查看详情
前后端分离之使用axios进行前后端交互实现评论显示——django+mysql+vue+element(代码片段)
Axios进行前后端交互一.修改vue存在的文件路径二.解决跨域问题三.渲染数据到前端四.完整代码jshtml教学视频：5.axios请求后台——评论功能6.解决跨域问题cors——评论功能7.前端界面显示——评论功能前言：作者：神的... 查看详情
vue体验(前后端交互)(代码片段)
记录：263体验XMLHttpRequest、jquery、Promise、fetch、axios的异步方式调用后端接口。本例环境：后端：node.js、express。前端：Vue.js、HTML、CSS、jQuery、axios。方式：分别使用XMLHttpRequest、jquery、Promise、fetch、axios 查看详情
测开之・《路由vue-route》(代码片段)
路由vue-route安装vue-routevue-router的基本使用编程式和声明式导航路由重定向命名路由安装vue-route使用安装命令安装npminstallvue-router在main.js中进行注册importVuefrom'vue'importVueRouterfrom'vue-router'Vue.use(VueRouter)直接全局的scrip 查看详情
测开之javascript・《javascript基础》(代码片段)
Javascript介绍和基本使用Javascript概述嵌入页面的方式基本用法注释变量数据类型运算符条件语句函数对象循环扩展介绍和基本使用Javascript概述要了解JavaScript，我们首先要回顾一下JavaScript的诞生。在上个世纪的1995年，当... 查看详情
测开之函数进阶篇・第六篇《闭包》(代码片段)
目录闭包闭包的概念闭包的内存分配机制闭包闭包的概念一个完整的闭包，必须满足以下三个条件：1、函数中嵌套函数2、外层函数返回内存嵌套函数名3、内存嵌套函数有引用外层的一个非全局变量deffunc():num=100defcount... 查看详情
测开之html・第一篇《html语法基础》(代码片段)
目录HTML页面结构文档声明页面头部页面内容常见的HTML标签注释标题标签段落和换行标签块标签含样式和语义的行内标签图像标签和链接标签列表有序列表无序列表表格表单form标签from表单中包含的元素input标签label标签textarea标... 查看详情
测开之css・第一篇《css语法基础》(代码片段)
目录css介绍和引用css概述css的基础语法css引入方法css背景设置背景色设置背景图像背景定位css文本样式css选择器标签选择器id选择器类选择器属性选择器包含选择器（层级选择器）组选择器css介绍和引用css概述CSS指的是层... 查看详情
测开之面向对象进阶篇・《多态》(代码片段)
面向对象三大特征面向对象编辑的三大特征：封装、继承、多态。封装：客观的失误封装成类（将数据和方法放在一个类中构成了封装）。继承：python中一个类可以继承于一个类，也可以继承多个类，... 查看详情
测开之vue・《vue高级特性》(代码片段)
Vue基础语法及高级特性Vue基本语法初始Vue安装vueVue的指令和插值属性绑定事件绑定vue的双向数据绑定分支语句遍历语句Vue基本语法初始VueVue是一套用于构建用户界面的渐进式框架。与其他大型框架不同的是，Vue被设计为可以... 查看详情
测开之数据类型进阶篇・第三篇《推导式》(代码片段)
目录列表推导式什么是推导式？推导式代码实现推导式的误区在列表推导式中添加if语句列表推导式中实现多个循环字典推导式字典推导式实现列表推导式什么是推导式？列表推导式可以利用range区间、元组、列表、字典... 查看详情
测开之函数进阶篇・第七篇《装饰器》(代码片段)
目录装饰器开放封闭原则装饰器的作用装饰器的应用场景实现一个装饰器装饰器原理阐述带参数的装饰器装饰器装饰类定义一个时间装饰器装饰器开放封闭原则软件实体应该是可扩展、而不可修改的。也就是说，对扩展是开... 查看详情
测开之面向对象进阶篇・《属性自省》(代码片段)
私有属性类里面定义的变量叫做属性，那么类属性有两种，分为：公有属性和私有属性。私有属性的定义：单下滑线开头：_attr双下划线开头：__attr其中单下划线开头的在外部可以直接访问，双下滑线&#... 查看详情
测开之面向对象进阶篇・《魔术方法》(代码片段)
魔术方法在类方法中__init__方法有什么作用？创建对象时，自动调用对创建的对象进行初始化设置。什么是魔术方法？在python中，像__init__这类双下滑线开头和结尾的方法，统一称之为魔术方法。注意：在... 查看详情
测开之并发编程篇・《并发并行线程队列进程和协程》(代码片段)
并发编程并发和并行多任务概念并发和并行同步和异步多线程threading模块介绍自定义线程类线程任务函数的传递多线程资源共享和资源竞争问题GIL全局解释锁互斥锁通过锁解决资源竞争问题死锁队列队列的方法FIFO先入先出队列LI... 查看详情
测开之数据类型进阶篇・第二篇《字典和集合的原理应用》(代码片段)
目录集合什么是集合？定义空集合集合的特点-自动去重集合常用的方法空集合添加元素add()删除集合元素remove()更新元素update()清空集合元素clear()复制元素copy()字典和集合的存储原理关于集合、字典、元祖、列表性能分析集... 查看详情
测开之函数进阶篇・第五篇《递归函数纯函数匿名函数偏函数》(代码片段)
目录递归函数递归函数的定义定义递归函数纯函数纯函数的概念纯函数的3个原则函数的副作用python常用的内置函数匿名函数三步运算符偏函数偏函数的定义偏函数的案例递归函数递归函数的定义在函数中调用函数自身，我们... 查看详情