Vue前后端交互

1.前后端交互模式

1.1 接口调用方式

• 原声 ajax
• 基于jQuery的ajax
• fetch
• axios

1.2 URL地址格式

1.2.1 传统形式的URL

格式：schema://host:port/path?query#fragment

1.schema

2.host

3.port

4.path

5.query

6.fragment

1.2.2 Restful形式的URL

HTTP请求方式

1.GET 查询

2.POST 添加

3.PUT 修改

4.DELETE 删除

---

2. Promise 用法

2.1 异步调用

• 异步效果分析（可以使用以下三类实现）

  • 定时任务
  • Ajax
  • 事件函数

• 多次异步调用的依赖分析

  • 多次异步调用的结果顺序不能确定
  • 异步调用结果如果存在依赖需要嵌套，可能造成回调地狱的现象

2.2 Promise 概述

Promise 是异步编程的一种解决方案，从语法上讲，Promise是一个对象，从它可以获取异步操作的消息。

2.3 Promise 基本使用

• 我们使用new来构建一个Promise Promise的构造函数接收一个参数，是函数，并且传入两个参数： resolve，reject， 分别表示异步操作执行成功后的回调函数和异步操作执行失败后的回调函数
• Promise实例生成以后，可以用then方法指定resolved状态和reject状态的回调函数

2.4 基于Promise处理Ajax请求

• 处理原生Ajax

• 发送多次ajax请求

2.5 then 参数中的函数返回值

0. 返回Promise实例对象

   • 返回的该示例对象会调用下一个then

1. 返回普通值

   • 返回的普通值会直接传递给下一个then，通过then参数中函数的参数接收该值

2.6 Promise常用API

2.6.1.实例方法

• p.then() 得到异步任务的正确结果
• p.chtch()获取异常信息
• p.finally()成功与否都会执行（尚且不是正式标准）

示例代码如下：

2.6.2 对象方法

• Promise.all() 并发处理多个异步任务，所有任务都执行完成才能得到结果
• Promise.race()并发处理多个异步任务，只要一个任务执行完成就能得到结果