关键词：
文章目录
Axios 前后端交互工具学习
引言
Axios是一个异步请求技术，核心作用就是用来在页面中发送异步请求，并获取对应数据在页面中进行渲染，页面局部更新技术Ajax.
引入Axios
cdn的方式引入
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
介绍
axios有get（）、delete（）、put（）、post（）,这个几个方法
GET请求的方式
<script>
// axios发送一个异步请求之 GET请求
axios.get("http://localhost:9090/get?id=1")
.then(// 代表请求成功之后的一个正确处理
function (response) // 返回的response是一个对象
console.log(response.data);)
.catch(// 请求失败的一个处理
function (err)
console.log(err);
)
</script>
get里面的参数就是一个url，传递参数的时候直接拼接到url中
then方法
这个就相当于回调函数，在ajax中 有一个success:function(data),可以进行回调，而这里通过 then进行对请求返回的响应数据进行一个处理，内部是一个函数，函数中的参数是返回的响应（包含响应头、响应数据、相应格式等，通过 response.data 能拿到返回数据）
catch方法
这个就像与异常返回的函数，在ajax中有一个 error:function(),，返回的服务器异常错误的响应数据
POST请求的方式
// axios发送各种方式的异步请求,post方法的第一个参数是 url，第二个参数是 在body中的 json对象
// 第二个参数自动转化成json数据，后端可以直接接收
axios.post("http://localhost:9090/post",id:"1").then(function (response)
console.log(response.data);
).catch(function (error)
console.log("服务器异常!")
)
怎么在body中传数据？
在post方法中第一个参数是请求的url，第二个请求的参数写成JSON格式的数据，后端可以直接通过 @RequestBody进行接收，后面的then、catch就照旧了。
PUT 请求的方式
axios.put("http://localhost:9090/put",id:"1",name:"rain7").then(function (response)
console.log(response.data);
).catch(function (error)
console.log("接口访问失败!");
)
Axios的基本配置
说一个问题，axios可以对一些事情进行基本的设置，在前后端分离的时候
比如说我们在进行异步请求的时候，要设置全局的一个baseUrl，以后每次写的时候url就不要写那么长了
还有请求发送超过5s，认为发送请求失败
这些配置在axios创建实例的时候就通过create进行配置，我们之后用instance进行发送axios请求
var instance = axios.create(
baseURL:"http://localhost:8080/",
timeout:"1000",//以毫秒为单位
);
配置还有很多，可以进axios的官网进行查看，每个配置都有注释
Axios的拦截器
可以在发送请求之前进行拦截（token身份验证）、也可以在返回响应之后进行拦截（服务器异常统一处理）,官网都有处理的代码以及各种拦截的方式!
// 添加请求拦截器
axios.interceptors.request.use(function (config) // config就是axios的配置信息，可以去官网看看
if(config.url.indexOf("?")===-1)// 如果没有？，那么说明之前没参数
url+="?token=1234";
else
url+="&token=1234";
return config;
, function (error) // 可以不写这个处理函数
// 对请求错误做些什么
return Promise.reject(error);
);
// 添加响应拦截器
axios.interceptors.response.use(function (response)
// 2xx 范围内的状态码都会触发该函数。
// 对响应数据做点什么
if(response.status!==200)
alert("服务器出现错误!");
return response;
, function (error)
// 超出 2xx 范围的状态码都会触发该函数。
// 对响应错误做点什么
return Promise.reject(error);
);
Vue 怎么和 Axios配合呢？
要想和vue进行配合，请先理解Vue的生命周期的这个知识点，在vue的所有data数据被加载后，在created() 阶段就可以之间请求数据进行加载了，如果在 beforCounted、count阶段进行请求的话，那么就相当于先渲染为空，然后再请求后端再次渲染，二次渲染不太好
总之 Axios的请求 要写在 Vue的生命周期函数 create() 函数中，如果axios内部要拿到data中的数据，不能使用this,因为axios内部的this指的是axios这个对象，不是vue实例，所以在axios外面，create()内部定义 _this = this，在axios内部使用 _this 代替 this 即可
var a = new Vue(
el:'', // el通常指定当前vue实例为那个容器服务，指定让vue实例与容器建立联系
data: // data中用于存储数据，数据供el属性所指定的容器去使用，值我们暂时先写成一个对象
,methods:,
create()// 生命周期的第二个函数，此时上面的data、methods数据已经加载过且校验了
var _this = this;
var instance = axios.create(
baseURL:"http://localhost:8080/",
timeout:"1000",//以毫秒为单位
)
instance.get("/url").then(function()).catch(function());
)
测开之・《前后端交互axios》(代码片段)
...node.js中使用，原生的js或者使用jquery来发生请求进行前后端数 查看详情
前后端分离之使用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 查看详情
前后端交互(小白教学)(代码片段)
在我们的印象中什么是前后端交互呢?我们一个后端程序员为什么要去学习前端知识?前后端交互到底是靠什么而进行关联的呢?接下来我们带着这三个问题来阅读这边文章!!!1.前后端交互所谓前后端交互,即前后端交互为前端和后端... 查看详情
vue前后台数据交互实例演示，使用axios传递json字符串数组(代码片段)
Vue前后台数据交互实例演示第一章：后台实现①Python启用Flask服务器②后台启用成功验证第二章：前台实现①Vue使用Axios实现接收json字符串、数组数据②前台接收数据演示[推荐文章]Python地图篇-使用pyecharts绘制世界地图、... 查看详情
vue前后端分离(代码片段)
axios前后端交互安装一定要安装到`项目目录下cnpminstallaxios配置在main.js中配置//配置axiosimportaxiosfrom'axios'Vue.prototype.$axios=axios;在组件中发送ajax请求created()//发送axios请求this.$axios(url:this.$settings.base_url+'/cars/',method:'get&... 查看详情
ajax前后端交互利器详解(代码片段)
✍Ajax前后端交互利器🔥Ajax前后端交互利器地址🔥Ajax前后端交互利器详解(一)https://blog.csdn.net/Augenstern_QXL/article/details/120116296🔥Ajax前后端交互利器详解(二)https://blog.csdn.net/Augenstern_QXL/article/details/1 查看详情
ajax前后端交互利器详解(代码片段)
✍Ajax前后端交互利器🔥Ajax前后端交互利器地址🔥Ajax前后端交互利器详解(一)https://blog.csdn.net/Augenstern_QXL/article/details/120116296🔥Ajax前后端交互利器详解(二)https://blog.csdn.net/Augenstern_QXL/article/details/1 查看详情
前后端交互(代码片段)
前端传JSON 此JSON有上下级关系每一个有孩子节点此节点有数据"standardspeciallistid":"10339","standardcostid":"0","costcode":"(A)","costcodelevel":"1","costcodename":"开发成本","costcodeparentid":"0","haschild":"","budgetvaria 查看详情
前后端分离之mockjs实战demo(代码片段)
基于vue-cli+webpack的demo项目结构axios文件夹用来创建axios相关配置：importaxiosfrom‘axios‘importvuefrom‘vue‘axios.defaults.headers.post[‘Content-Type‘]=‘application/x-www-form-urlencoded‘//请求拦截器axios.interceptors.request 查看详情
前后端学习日常
2018-2-271.前端打包工具webpack的安装与使用(当前版本为4.0.1)，应用webpack打包前端资源来解决前端项目的复杂化，将分模块开发的功能进行打包2.Animate.css-预设css3动画库，用于前端交互展示动画特效3.HTML-CSS-JSPrettify-sublime代码格式... 查看详情
vue开发实战实战篇#36：如何与服务端进行交互（axios）(代码片段)
说明【Vue开发实战】学习笔记。安装依赖windows需要安装cross-env才能拿到参数npmicross-env-D添加脚本"serve:no-mock":"cross-envMOCK=nonevue-cli-serviceserve"添加支持jsxhttps://github.com/vuejs/jsx-vue2npminstall@vue/ 查看详情
前后端分离学习笔记---[跨域问题,jwt,路由守卫,axios设置请求拦截和响应拦截](代码片段)
...现安全问题。但是在某些情况下时需要跨域的,这次学习前后端项目分离时,前后端服务器的端口不一样,这就需要跨域进行请求和响应数据信息;或者说在同一项目中需要访问子域系统模块,就需要跨域访问;那么当然也可以不跨域完... 查看详情
前后端分离学习笔记---[跨域问题,jwt,路由守卫,axios设置请求拦截和响应拦截](代码片段)
...现安全问题。但是在某些情况下时需要跨域的,这次学习前后端项目分离时,前后端服务器的端口不一样,这就需要跨域进行请求和响应数据信息;或者说在同一项目中需要访问子域系统模块,就需要跨域访问;那么当然也可以不跨域完... 查看详情
前后端交互模式(代码片段)
一、原生Ajax1.1ajax概述Ajax即“AsynchronousJavascriptAndXML”（异步JavaScript和XML），是一种用于客户端与服务端进行数据交互的一种技术。Ajax能够创建交互式、快速动态网页应用，无需重新加载整个网页的情况下，能够更新部分网页。... 查看详情
初识vue——最简单的前后端交互示例(代码片段)
一、初识vue时的困惑最近想学一门前端技术防身，看到博客园中写vue的多，那就vue吧。都说vue的官方教程写得好，所以我就从官方教程开始学习。官方教程说“Vue(读音/vju?/，类似于view)是一套用于构建用户界面的渐进式框架。与... 查看详情
servletapi的使用案例-前后端交互的表白墙(代码片段)
...程序写web程序要重点考虑,数据交互的格式,要提前约定好前后端交互的格式,这件事叫做设计前后端交互接口(包括请求数据是什么格式,响应是什么格式,什么时候发请求,浏览器按什么格式解析)前后端交互的环节:1.点击提交(向浏览... 查看详情
前后端分离学习笔记---[vue基础](代码片段)
文章目录1.关于前后端分离2.vue基本学习3.vue-cli搭建项目4.页面路由5.ElementUI6.Axios异步通信建议官方文档学习VUE2.0版本在线文档1.关于前后端分离前端html页面通过ajax调用后端的restufulapi接口并使用json数据进行交互.前端服务器使用n... 查看详情