首页 > 其他 > 详细

Vue02:前后端交互

时间:2020-04-30 09:16:12      阅读:66      评论:0      收藏:0      [点我收藏+]

Vue:前后端交互

1、前后端交互模式

1.1、接口调用方式

  • 原生 ajax—— xhr
  • 基于jQuery 的 ajax
  • fetch
  • axios

技术分享图片

1.2、URL地址格式

技术分享图片

技术分享图片

2、Promise 用法

2.1、异步调用

  • 异步效果分析
    • 定时任务
    • Ajax
    • 事件函数
  • 多次异步调用的依赖分析
    • 多次异步调用的结果顺序不确定
    • 异步调用结果,如果存在依赖,需要嵌套

嵌套案例:

技术分享图片

2.2、Promise概述

技术分享图片

2.3、Promise 基本用法

技术分享图片

案例:

技术分享图片

2.4、基于Promise处理Ajax请求

技术分享图片

例子:

技术分享图片

技术分享图片

例子:

技术分享图片

2.5、then参数中的函数返回值

技术分享图片

2.6、Promise常用的API

技术分享图片

技术分享图片

3、接口调用——fetch用法

3.1、fetch 概述

技术分享图片

3.2、fetch的基本用法

技术分享图片

3.3、fetch请求参数

技术分享图片

技术分享图片

技术分享图片

技术分享图片

Json的数据格式:

技术分享图片

技术分享图片

3.4、fetch响应结果

技术分享图片

4、接口调用——axios用法

4.1、axios 的基本特性

技术分享图片

4.2、axios 的基本用法

技术分享图片

4.3、axios 的常用API

技术分享图片

4.4、axios 的参数传递

技术分享图片

技术分享图片

技术分享图片

技术分享图片

技术分享图片

4.5、axios 的响应结果

技术分享图片

4.6、 的全局配置

技术分享图片

4.7、axios 拦截器

技术分享图片

技术分享图片

技术分享图片

5、接口调用——async/await用法

5.1、async/await 的基本用法

技术分享图片

技术分享图片

5.2、async/await 处理多个异步请求

技术分享图片

6、案例

Vue02:前后端交互

原文:https://www.cnblogs.com/ilbty/p/12806132.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!