Vue前后端交互

这是我参与8月更文挑战的第17天，活动详情查看：8月更文挑战

1.前后端交互模式

1.1 接口调用方式

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

1.2 URL地址格式

1.2.1 传统形式的URL

1.2.2 Restful形式的URL

• HTTP请求方式

  • GET 查询
  • POST 添加
  • PUT 修改
  • DELETE 删除

2.Promise 用法

2.1 异步调用

• 异步效果分析

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

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

  • 多次异步调用的结果顺序不确定
  • 异步调用结果如果存在依赖需要嵌套

2.2 Promise 概述

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

使用Promise 主要有以下好处：

• 可以避免多层异步调用嵌套问题（回调地狱）
• Promise 对象提供了简洁的API，使得控制异步操作更加容易

2.3 Promise 基本用法

• 实例化Promise对象，构造函数中传递函数，该函数用于处理异步任务
• resolve和reject两个参数用于处理成功和失败两种情况，并通过p.then获取处理结果

 var p = new Promise(function(resolve,reject){
     //成功时调用  resolve()
     //失败时调用  reject()
 });
 ​
 p.then(function(ret){
     //从resolve得到正常结果
 })，function(ret){
     //从reject得到错误信息
 }
复制代码

2.4 Promise常用的API

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

2.5 Promise对象方法

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

3.fetch

3.1 fetch 概述

0. 基本特性

• 更加简单的数据获取方式，功能更加强大，更灵活，可以看作是xhr的升级版
• 基于promise实现

2. 语法结构

 fetch(url).then(fn2)
         .then(fn3)
         ......
         
         .catch(fn)
复制代码

3.2 fetch 的基本用法

 fetch('/abc').then(data=>{
     return data.text()
 }).then(ret=>{
     //注意这里得到的才是最终的数据
     console.log(ret)
 })
复制代码

3.3 fetch 请求参数

• method：HTTP请求方法，默认为GET（GET,POST,PUT,DELETE)
• body:HTTP的请求参数
• headers：HTTP的请求头，默认为{}

 fetch('/abc',{
     method: 'get'
 }).then(data=>{
     return data.text()
 }).then(ret=>{
     //注意这里得到的才是最终的数据
     console.log(ret)
 })
复制代码

3.4 fetch 响应结果

响应数据格式

• text(): 将返回体处理成字符串类型
• json(): 返回结果和JSON.parse(responseText) 一样

4.axios

4.1 axios 的基本特征

• 支持浏览器和node.js
• 支持promise
• 能拦截请求和响应
• 自动转换JSON数据

4.2 axios 的基本用法

 axois.get('/data')
     .then(ret=>{
         //data属性名称是固定的，用于获取后台响应的数据
         console.log(ret.data)
 })
复制代码

4.3 axios 的常用API

• get: 查询数据
• post： 添加数据
• put： 修改数据
• delete： 删除数据

4.4 axios 的响应结果

• data： 实际响应回来的结果
• headers： 响应头信息
• status： 响应状态码
• statusText： 响应状态信息

4.5 axios 的全局配置

• axios.defaults.timeout = 3000 //超出时间
• axios.defaults.baseURL = ‘http://localhost:3000/app‘ //默认地址
• axios.defaults.headers[‘mytoken’] = ‘aqwerwqwerqwer2ewrwe23eresdf23’ //设置请求头

4.6 axios 拦截器

0. 请求拦截器

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

 //添加一个请求拦截器
 axios.interceptors.request.use(function(config){
     //在请求发出之前进行一些信息设置
     return config
 },function(err){
     //处理响应的错误信息
 })
复制代码

2. 响应拦截器

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

 //添加一个请求拦截器
 axios.interceptors.response.use(function(res){
     //在请求发出之前进行一些信息设置
     return res
 },function(err){
     //处理响应的错误信息
 })
复制代码

5.async/await 用法

• async/await 是ES7引入的新语法，可以更加方便的进行异步操作
• async 关键字用于函数上(async函数的返回值是Promise实例对象)
• await 关键字用于async函数当中（await 可以得到异步的结果）

 async function queryData(id){
     const ret = await axios.get('/data')
     return ret
 }
 queryData.then(ret=>{
     console.log(ret)
 })
复制代码