echarts前后端交互数据_Vue-前后端交互
发布日期:2021-10-31 18:34:48
浏览次数:33
分类:技术文章
本文共 1788 字,大约阅读时间需要 5 分钟。
一、基础复习
1.前后端交互
通过浏览器调用接口,拿到后台的数据,再做前端的数据渲染。
2. 接口调用方式
因为Vue不操作DOM,所以用后两种
- ajax
- jQuery的ajax
- fetch
- axios
3. URL
3.1 传统的URL
3.2 Restful格式的URL
4. promise
ES6引入的一种语法,专门用来处理异步编程。
JS层面的异步编程有:
- 定时任务
- ajax
- 事件函数
4.1 演示jQuery的ajax的异步
先执行外面的,后执行里面的
路由
app
前端
var
控制台先打印 --- 后打印 Hello World!
多次写ajax请求,顺序无法控制
路由
app
前端
$
级别相同,没有顺序
若想要按顺序打印,需要嵌套(回调地狱)
$
4.2 promise演示
- 解决回调地狱问题
- 简洁的API,更容易控制异步操作
简单演示
var
成功时触发resolve,失败触发reject
基于promise处理ajax请求
function
路由:
app
显示:
then参数中函数的返回值
- 返回promise对象,该对象会调用下一个then
queryData
- 返回普通值,直接传递给下一个then
queryData
promise常用的API
- .then() 获取异步的正确结果
- .catch() 获取异常信息
- .finally() 成功与否都会执行
function
- Promise.all() 并发处理多个异步函数,所有任务执行完才能得到结果
- Promise.race() 并发处理多个异步函数,只要一个函数执行完就得到结果
function
路由
app
5. fetch
fetch是原生JS,且会返回Promise
fetch(url, options).then()options默认get时可省略
5.1 fetch的基本使用
- text() 方法属于fetchAPI的一部分,它返回一个Promise实例对象,用于获取后台返回的数据
<
路由
app
显示:控制台打印 Hello Fetch!
5.2 fetch的请求参数
get delete
fetch
路由
app
控制台打印:
- 传统的URL传递参数!123
- Restful形式的GET请求传递参:查询456
- Restful形式的DELETE请求传递参数:删除789
post put
fetch
路由
app
控制台打印:
- POST请求传递参数xwf:添加lisi---123
- POST请求传递参数json:添加张三---456
- PUT请求传递参数:修改123---张三---789
5.3 fetch响应结果
text() 响应数据为json字符串格式
fetch
json() 响应数据为json对象格式
fetch
6. axios
网址:https://github.com/axios/axios
6.1 axios的基本使用
- ret自定义
- data固定,用于获取后台的真实数据
<
路由
app
控制台打印出 Hello axios!
6.2 axios的请求参数
get请求参数(查询)
axios
对应路由
app
delete请求参数(删除)
同上,get换delete
post请求参数(添加)
// 请求参数为 json字符串 类型
路由
app
put请求参数(修改)
axios
路由
app
6.3 axios的响应结果
响应结果的主要属性
- data:响应数据
- headers:响应头信息
- status:响应状态码
- statusText:响应状态信息
axios
路由
app
axios全局设置
// 超过3秒没响应,返回服务器出错
6.4 axios拦截器
请求拦截器
config是请求对象,一定要写return。
axios
响应拦截器
res是响应对象
axios
7. async/await
ES7引入的语法,更加方便的进行异步操作
处理单个异步请求
- async作为一个关键字放到函数前面,函数就会隐式返回一个promise
- await 关键字只能在使用 async 定义的函数中使用不能单独使用,后面可以直接跟一个 Promise实例对象
async
处理多个异步请求
axios
路由
app
控制台打印 world
转载地址:https://blog.csdn.net/weixin_40006779/article/details/110654524 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!
发表评论
最新留言
路过,博主的博客真漂亮。。
[***.116.15.85]2024年03月31日 02时58分08秒
关于作者
喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!
推荐文章
《微观动机与宏观行为》精髓:个人的微观动机,是如何影响宏观行为结果的?
2019-04-26
《周期》书中的精髓:如何利用周期,掌握世界的发展趋势,实现财富积累。
2019-04-26
《伟大的博弈》书中的精髓:华尔街是如何从一条小街,一步步发展为世界金融中心的。
2019-04-26
《逃不开的经济周期》书中的精髓:经济周期是推动创新变革和经济增长以及复兴的关键力量。
2019-04-26
《动物精神》书中的精髓:人类的非理性面影响经济决策,这些有可能是金融危机的根源。
2019-04-26
《巴菲特法则》书中的精髓:用好巴菲特企业前景投资法则,股票投资稳赚不赔。
2019-04-26
《战胜华尔街》书中的精髓:业余投资者如何根据行业特点选好股票,赚得比专业的投资者还要多?
2019-04-26
《股市稳赚》书中的精髓:用简单的神奇公式进行股票投资,获得稳定而持久的收益。
2019-04-26
作文提升~老师整理的优美比喻句太实用
2019-04-26
作文提升~老师整理的优美拟人句太实用
2019-04-26
作文提升~老师整理的优美排比句太实用
2019-04-26
作文提升~老师整理的夸张句,太实用了,赶快收藏
2019-04-26