Vue前端如何与后端实现高效交互？

本文共计2970个文字，预计阅读时间需要12分钟。

目录+ Promise的基本使用+ 多个请求，链式编程+ Promise的API实例方法+ Promise的API对象方法（直接通过Promise函数名调用的方法）+ 接口调用 - fetch用法+ 基本使用+ 常用配置选项+ fetch响应

目录

• Promise的基本使用
• 基本使用
• 多个请求，链式编程
• Promise的API—实例方法
• Promise的API—对象方法（直接通过Promise函数名称调用的方法）
• 接口调用-fetch用法
• 基本使用
• 常用配置选项
• fetch响应结果
• 接口调用–axios用法
• 认识
• axios的基础用法
• axios的响应结果
• axios拦截器
• async 和 await
• async 基础用法
• async 函数处理多个异步函数

Promise的基本使用

基本使用

new一个promise，为其传入一个函数作为参数，这个函数中传入两个参数，分别用来执行异步任务成功和失败的回调函数。

function query(){     var p=new Promise(function(resolve,reject){         setTimeout(function(){         var flag=true;         if(flag){             resolve('对了');         }         else{             reject('错了');         }         },1000)     });     return p; } query().then(function(data){   //第一个函数接收成功的值     console.log(data); },function(data){             //第二个函数接收失败的值     console.log(data); }); 输出结果：‘对了'

多个请求，链式编程

当我们发送多个请求时，传统的ajax会出现多层嵌套的回调地狱，Promise为我们提供了链式编程。

function queryData(url) {       var p = new Promise(function(resolve, reject){         var xhr = new XMLHttpRequest();         xhr.onreadystatechange = function(){           if(xhr.readyState != 4) return;           if(xhr.readyState == 4 && xhr.status == 200) {             // 处理正常的情况             resolve(xhr.responseText);           }else{             // 处理异常情况             reject('服务器错误');           }         };         xhr.open('get', url);         xhr.send(null);       });       return p;     }     // 发送多个ajax请求并且保证执行顺序     queryData('localhost:3000/data')       .then(function(data){         console.log(data)        //想要链式编程下去，必须return         return queryData('localhost:3000/data1');       })       .then(function(data){         console.log(data);         return queryData('localhost:3000/data2');       })       .then(function(data){         console.log(data)       });

Promise的API—实例方法

• .then() ： 传入两个参数时，只执行成功的。传入一个参数时，那个参数执行的是成功的回调。
• 得到成功的结果
• .catch()：传入两个参数时，只执行错误的。传入一个参数时，那个参数执行的是失败的回调。
• 得到异常的结果
• .finally()不是正式标准
• 无论成功与否都会执行

<script type="text/javascript">     /*       Promise常用API-实例方法     */     // console.dir(Promise);     function foo() {       return new Promise(function(resolve, reject){         setTimeout(function(){           // resolve(123);           reject('error');         }, 100);       })     }     foo()        .then(function(data){          console.log(data)        })        .catch(function(data){         console.log(data)        })        .finally(function(){          console.log('finished')        });     // --------------------------     // 两种写法是等效的     foo()       .then(function(data){         # 得到异步任务正确的结果         console.log(data)       },function(data){         # 获取异常信息         console.log(data)       })       # 成功与否都会执行（不是正式标准）        .finally(function(){         console.log('finished')       });   </script>

Promise的API—对象方法（直接通过Promise函数名称调用的方法）

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

• Promise.all方法接受一个数组作参数，数组中的对象（p1、p2、p3）均为promise实例（如果不是一个promise，该项会被用Promise.resolve转换为一个promise)。它的状态由这三个promise实例决定

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

• Promise.race方法同样接受一个数组作参数。当p1, p2, p3中有一个实例的状态发生改变（变为fulfilled或rejected），p的状态就跟着改变。并把第一个改变状态的promise的返回值，传给p的回调函数

  <script type="text/javascript">     /*       Promise常用API-对象方法     */     // console.dir(Promise)     function queryData(url) {       return new Promise(function(resolve, reject){         var xhr = new XMLHttpRequest();         xhr.onreadystatechange = function(){           if(xhr.readyState != 4) return;           if(xhr.readyState == 4 && xhr.status == 200) {             // 处理正常的情况             resolve(xhr.responseText);           }else{             // 处理异常情况             reject('服务器错误');           }         };         xhr.open('get', url);         xhr.send(null);       });     }     var p1 = queryData('localhost:3000/a1');     var p2 = queryData('localhost:3000/a2');     var p3 = queryData('localhost:3000/a3');      Promise.all([p1,p2,p3]).then(function(result){        //请求时间和发送顺序有关，先发送先返回。        //   all 中的参数  [p1,p2,p3]   和 返回的结果一 一对应["HELLO TOM", "HELLO JERRY", "HELLO SPIKE"]        console.log(result) //["HELLO TOM", "HELLO JERRY", "HELLO SPIKE"]      })     Promise.race([p1,p2,p3]).then(function(result){       // 由于p1执行较快，Promise的then()将获得结果'P1'。p2,p3仍在继续执行，但执行结果将被丢弃。       console.log(result) // "HELLO TOM"     })   </script>

接口调用-fetch用法

• 更加简单的数据获取方式，高性能更强大、更灵活，可以看做是xhr的升级版
• 给Promise实现
• Fetch API是新的ajax解决方案 Fetch会返回Promise
• fetch不是ajax的进一步封装，而是原生js，没有使用XMLHttpRequest对象。

fetch(url, options).then(）  <script type="text/javascript">    /*      Fetch API 基本用法          fetch(url).then()         第一个参数请求的路径   Fetch会返回Promise   所以我们可以使用then 拿到请求成功的结果     */    fetch('localhost:3000/fdata').then(function(data){      // text()方法属于fetchAPI的一部分，它返回一个Promise实例对象，用于获取后台返回的数据      return data.text();   //text()是fetch的一个api，返回的是一个Promise的对象    }).then(function(data){      //   在这个then里面我们能拿到最终的数据        console.log(data);    })  </script>

常用配置选项

• fetch(url, options).then(）
• HTTP协议，它给我们提供了很多的方法，如POST，GET，DELETE，UPDATE，PATCH和PUT
• 默认的是 GET 请求
• 需要在 options 对象中 指定对应的 method method:请求使用的方法
• post 和 普通 请求的时候 需要在options 中 设置 请求头 headers 和 body

GET请求

传统url请求传参—通过“？”传递参数

前端代码

fetch('localhost:3000/books?id=123', {                 # get 请求可以省略不写 默认的是GET                  method: 'get'             })             .then(function(data) {                 # 它返回一个Promise实例对象，用于获取后台返回的数据                 return data.text();             }).then(function(data) {                 # 在这个then里面我们能拿到最终的数据                   console.log(data)             });

后端代码

app.get('/books'(req.res)=>{     res.send("传统url传递参数"+req.query.id); })

restful形式url传递参数—通过“/”传递参数

前端代码

fetch('localhost:3000/books/456', {                 # get 请求可以省略不写 默认的是GET                  method: 'get'             })             .then(function(data) {                 return data.text();             }).then(function(data) {                 console.log(data)             });

后端代码

app.get('/book/:id',(req.res)=>{     res.send("restful形式传递参数"+req.params.id); })

DELETE请求

与GET方式相似，只需把method属性改为“delete”

POST请求方式的参数传递

post传递参数时，option对象中除了method属性，需要额外增加headers和body属性

前端代码

body为查询字符串格式

var url='127.0.0.1:3000/product/books/';       fetch(url,{         method:'post',         headers:{           'Content-Type':'application/x-www-form-urlencoded'         },         body:'uname=高进宇&pwd=11223344'       }).then(data=>{         return data.text();       }).then(data=>{         console.log(data);       })

后端代码

app.post('/books', (req, res) => {     res.send('axios post 传递参数' + req.body.uname + '---' + req.body.pwd)   })

body为JSON格式

fetch('localhost:3000/books', {                 method: 'post',                 body: JSON.stringify({                     uname: '张三',                     pwd: '456'                 }),                 headers: {                     'Content-Type': 'application/json'                 }             })             .then(function(data) {                 return data.text();             }).then(function(data) {                 console.log(data)             });

后端代码

app.post('/books', (req, res) => {     res.send('axios post 传递参数' + req.body.uname + '---' + req.body.pwd)   })

PUT请求方式的参数传递

fetch响应结果

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

• text():将返回体处理成字符串形式
• json()：返回结果和JSON.parse(response.Text)一样

    /*       Fetch响应结果的数据格式     */     fetch('localhost:3000/json').then(function(data){       // return data.json();   //  将获取到的数据使用 json 转换对象       return data.text(); //  //  将获取到的数据 转换成字符串      }).then(function(data){       // console.log(data.uname)       // console.log(typeof data)       var obj = JSON.parse(data);       console.log(obj.uname,obj.age,obj.gender)     })

接口调用–axios用法

认识

• 基于promise用于浏览器和node.js的api.example.com';

  配置 超时时间

  axios.defaults.timeout = 2500;

  配置公共的请求头

  axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;

  配置公共的 post 的 Content-Type

  axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

  GET请求

  发送get请求

  axios.get('localhost:3000/adata').then(function(ret){        #  拿到 ret 是一个对象      所有的对象都存在 ret 的data 属性里面       // 注意data属性是固定的用法，用于获取后台的实际数据       console.log(ret.data)       console.log(ret)     })

  get 请求传递参数

  通过传统的url 以 ? 的形式传递参数

  axios.get('localhost:3000/axios?id=123').then(function(ret){       console.log(ret.data)     })

  restful 形式传递参数

  axios.get('localhost:3000/axios/123').then(function(ret){       console.log(ret.data)     })

  通过params 形式传递参数

  前端代码

  axios.get('localhost:3000/axios', {       params: {         id: 789       }     }).then(function(ret){       console.log(ret.data)     })

  后端代码

  router.get('/axios', (req, res) => {     res.send('axios get 传递参数' + req.query.id) })

  DELETE请求传参

  传参形式和GET请求一样

  POST请求

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

  前端代码

  axios.post('localhost:3000/axios', {       uname: 'lisi',       pwd: 123     }).then(function(ret){       console.log(ret.data)     })

  后端代码

  router.post('/axios', (req, res) => {     res.send('axios post 传递参数' + req.body.uname + '---' + req.body.pwd)   })

  通过 URLSearchParams传递参数（application/x-www-form-urlencoded）

  var params = new URLSearchParams();     params.append('uname', 'zhangsan');     params.append('pwd', '111');     axios.post('localhost:3000/axios', params).then(function(ret){       console.log(ret.data)     })

  PUT请求

  与post请求一样。

  axios的响应结果

  • data:实际响应回来的数据。
  • headers：响应头信息。
  • status：响应状态码。
  • statusText：响应状态信息。

  axios拦截器

  请求拦截器

  请求拦截器的作用是在请求发送前进行一些操作

  例如在每个请求体里加上token，统一做了处理如果以后要改也非常容易

  axios.interceptors.request.use(function(config) {       console.log(config.url)       # 1.1  任何请求都会经过这一步   在发送请求之前做些什么          config.headers.mytoken = 'nihao';       # 1.2  这里一定要return   否则配置不成功         return config;     }, function(err){        #1.3 对请求错误做点什么           console.log(err)     })

  响应拦截器

  响应拦截器的作用是在接收到响应后进行一些操作

  例如在服务器返回登录状态失效，需要重新登录的时候，跳转到登录页

   axios.interceptors.response.use(function(res) {       #2.1  在接收响应做些什么         var data = res.data;       return data;     }, function(err){       #2.2 对响应错误做点什么         console.log(err)     })

  经过以上响应拦截器处理以后。下面拿到的res就是需要的数据，不需要再进行res.data的操作。

  axios.post('localhost:3000/axios', {       uname: 'lisi',       pwd: 123     }).then(function(res){       console.log(res)     })

  async 和 await

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

  任何一个async函数都会隐式返回一个promise

  await关键字只能在使用async定义的函数中使用

  

  • await后面可以直接跟一个 Promise实例对象
  • await函数不能单独使用

  async/await 让异步代码看起来、表现起来更像同步代码

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

  async关键字用于函数上（async函数的返回值是Promise对象）。

  await关键字用于async函数当中（await可以直接得到异步的结果）。

  async 基础用法

      //async作为一个关键字放到函数前面     async function queryData() {       //await关键字只能在使用async定义的函数中使用      await后面可以直接跟一个 Promise实例对象       var ret = await new Promise(function(resolve, reject){         setTimeout(function(){           resolve('nihao')         },1000);       })       // console.log(ret.data)       return ret;     }     //任何一个async函数都会隐式返回一个promise   我们可以使用then 进行链式编程     queryData().then(function(data){       console.log(data)     })

  async 函数处理多个异步函数

  axios.defaults.baseURL = 'localhost:3000';     async function queryData() {       //  添加await之后 当前的await 返回结果之后才会执行后面的代码          var info = await axios.get('async1');       //  让异步代码看起来、表现起来更像同步代码       var ret = await axios.get('async2?info=' + info.data);       return ret.data;     }     queryData().then(function(data){       console.log(data)     })

  以上为个人经验，希望能给大家一个参考，也希望大家多多支持易盾网络。