Vue前后端交互

前后端交互模式

调接口的方式

• 原生ajax
• 基于jquery的ajax
• fetch
• Promise
  URL地址格式
• 传统的url
• restful形式的url

Promise用法

js中常见的异步调用：

• 定时器
• ajax
• 事件函数
  Promise解决了什么问题？
• 主要解决异步深层嵌套
• 语法更加简洁

Promise的基本使用

如何定义一个Promise实例

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

Promise发送ajax请求并处理回调地狱问题

多个请求如何保证顺序？

• 通过then的形式保证顺序

Promise的then方法参数中的函数的返回值

then中的参数代表什么？

• then方法指定resolved状态和reject状态的回调函数
  then返回值有几种？
• 可以返回一个非Promise对象
• 可以返回一个Promise对象

Promise常用API——实例方法

实例方法在原型中：

• then
• catch
• finally

Promise常用API——对象方法

all：
Promise.all方法接受一个数组作为参数，数组中的对象（p1,p2,p3）均为Promise实例（如果不是一个promise，该项会备用Promise.resolve转换为一个promise），它的状态由着三个promise实例决定
race：
Promise.race方法同样接受一个数组作为参数，当p1,p2,p3中有一个实例的状态发生改变（变为fulfilled或rejected），p的状态就跟着改变，并把第一个改变状态的promise的返回值传给p的回调函数。

接口调用-fetch用法

fetch的基本使用

fetch就是ajax+Promise使用的方式和jquery提供的$.ajax()差不多
fetch默认是get请求

fetch API 的get和delete请求传参

• fetch(url, options).then()
• get传递参数——传统URL通过url?的形式传参数
  restful形式的URL通过/的形式传递参数
• delete请求方式传递参数和get一样

fetch API 的post和put请求传参

需要在body中传递参数
需要制定headers，因为默认Content-Type不是application/x-www-form-urlencoded

fetch API 的响应数据格式

响应格式：
用fetch来获取数据，如果响应正常返回，我们首先看到的是一个response对象，其中包括返回的一堆原始字节，这些字节需要在收到后，需要我们通过调用方法将其转换为相应格式的数据，比如json、blob或者text

接口调用-axios用法

axios的应用

• 基于promise用于浏览器和node.js的http客户端
• 支持浏览器和node.js
• 支持promise
• 能拦截请求和相应
• 自动转换json数据
• 能转换请求和响应数据

get和delete请求传递参数

• 通过传统的URL以?的形式传递参数
• restful形式传递参数
• 通过params传递参数

axios响应结果与全局配置

响应结果主要属性

• data实际响应回来的数据
• headers响应头
• status响应状态码
  axios中的全局配置
• 配置公共的请求头axios.defaults.baseURL
• 配置超时时间axios.defaults.timeout
• 配置公共的请求头axios.defaults.headers.common['Authorization']

axios拦截器的用法

请求拦截器

• 请求拦截器的作用是在请求发送前进行一些操作：例如在每个请求题里加上token，统一做了处理如果以后要改也非常容易
  响应拦截器
• 响应拦截器的作用是在接收到响应后进行一些操作
• 例如在服务区返回登陆状态失效，需要重新登陆的时候，跳转到登陆页

接口调用-async/await用法

async和await用法

async作为一个关键字放到函数前面

• 任何一个async函数都会隐式返回一个promise
  await关键字只能在使用async定义的函数中使用
• await后面可以直接跟一个promise实例对象
• async/await让异步代码看起来、表现起来更像同步代码

async函数处理多个异步请求

async和await好处：

• async搭配await是ES7提出的，它的实现是基于promise
  注意细节点：
• await函数不能单独使用，而且async函数返回的是一个promise对象，可以使用then函数添加回调函数。当函数执行的时候，一旦遇到await函数就会先返回一个promise对象，等到异步操作完成，再去执行后面的语句。