5.Vue前后端交互

一、前后端交互模式

1.1 接口调用方式

原生ajax

基于JQuery的ajax

fetch

axios

返回一个完整的HTML页面

也可以只返回特定格式的数据，比如json

1.2 URL地址格式

(1) 传统形式的URL

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

schema:协议。如http、https、ftp等

host:域名或IP地址

port:端口，http默认端口80

path:路径 例如/abc/a/b/c

query:查询参数 例如uname=lisi&age=12

fragment:锚点(哈希hash),用于定位页面的某个位置

符合规则的URL

http://www.itcast.cn

http://www.itcast.cn/java/web

http://www.itcast.cn/java/web?flag=1

http://www.itcast.cn/java/web?flag=1#function

(2) Restful形式的URL

HTTP请求方式

GET 查询

POST 添加

PUT 修改

DELETE 删除

符合规则的URL

http://www.hello.com/books GET

http://www.hello.com/books POST

http://www.hello.com/books/123 PUT

http://www.hello.com/books/123 DELETE

二、Promise 用法

2.1 异步调用

异步效果分析

定时任务 setTimeout setInterval

Ajax

事件函数

多次异步调用的依赖分析

多次异步调用的结果顺序不确定

嵌套调用结果如果存在依赖需要嵌套

2.2 Promise概述

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

使用Promise主要有以下好处

可以避免多层异步调用嵌套问题(回调地狱)

Promise对象提供了简洁的API，使得控制异步操作更加荣哟

2.3 Promise 基本用法

实例化Promise对象，构造函数中传递函数，该函数用于处理异步任务

resolve和reject两个参数用于处理成功与失败两种情况，并通过p.then获取与处理结果

2.4 基于Promise处理Ajax请求

1. 处理原生Ajax

2. 发送多次ajax请求

2.5 then参数中的函数返回值

1. 返回Promise实例对象

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

2. 返回普通值

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

2.6 Promise常用的API

1. 实例方法

p.then() 得到异步任务的正确结果

p.catch() 获取异常信息

p.finally() 成功与否都会执行

2. 对象方法

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

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

三、接口调用-fetch用法

3.1 fetch 概述

(1) 基本特性

更加简单的数据获取方式，功能更强大、更灵活，可以看做是xhr的升级版

基于Promise实现

(2) 语法结构

3.2 fetch的基本用法

.text();

3.3 fetch请求参数

(1) 常用配置选项

method(String):HTTP请求方法，默认为GET(POST、PUT、DELETE)

body(String):HTTP请求参数

headers(Object):HTTP的请求头，默认为{}

(2) GET请求方式的参数传递

(3) DELETE请求方式的参数传递

(4) POST请求方式的参数传递

(5) PUT请求方式的参数传递

3.4 fetch响应结果

响应数据格式

text(): 将返回体处理成字符串类型

json: 返回结果和JSON.parse(responseText)一样

四、接口调用-axios用法

4.1 axios 的基本特性

它具有以下特征

支持浏览器和node.js

支持Promise

能拦截请求和响应

自动转换JSON数据

4.2 axios 的基本用法

4.3 axios 的常用API

get: 查询数据

post: 添加数据

put: 修改数据

delete: 删除数据

4.4 axios 的参数传递

(1) GET传递参数

通过URL传递参数

通过params选项传递参数

(2) DELETE传递参数

参数传递方式与GET类似

(3) POST传递参数

通过选项传递参数(默认传递的是json格式的数据)

通过URLSearchParams传递参数(application/x-www/form/urlencoded)

(4) PUT传递参数

参数传递方式与POST类似

4.5 axios 的响应结果

响应结果的主要属性

(1) data: 实际响应回来的数据

(2) headers: 响应头信息

(3) status: 响应状态码

(4) status Text: 响应状态信息

 

4.6 axios 的全局配置

axios.defaults.timeout = 3000; // 超时事件

axios.defaults.baseURL = 'http://localhost:300/app'; // 默认地址

axios.defaults.headers['mytoken'] = 'aduhaiurhuh332341bhjiuh';// 设置请求头

 

4.7 axios拦截器

(1) 请求拦截器

在发出请求之前设置一些信息

 

(2) 响应拦截器

在获取数据之前对数据做一些加工处理

五、接口调用-async/await用法

5.1 async/await 的基本用法

async/await是ES7引入的新语法，可以更加方便的进行异步操作

async关键字用于函数上 (async函数的返回值是Promise实例对象)

await关键字用于async函数当中 (await可以得到异步的结果)

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

多个异步请求的场景

六、基于接口的案例

需要调用接口的功能点

(1) 图书列表数据加载

(2) 添加图书

(3) 验证图书名称是否存在

(4) 编辑图书-根据ID查询图书信息

(5) 编辑图书-提交图书信息

(6) 删除图书