您现在的位置是：网站首页> 编程资料编程资料

Vue中前端与后端如何实现交互_vue.js_

2023-05-24 386人已围观

简介 Vue中前端与后端如何实现交互_vue.js_

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('http://localhost:3000/data')       .then(function(data){         console.log(data)        //想要链式编程下去，必须return         return queryData('http://localhost:3000/data1');       })       .then(function(data){         console.log(data);         return queryData('http://localhost:3000/data2');       })       .then(function(data){         console.log(data)       });

Promise的API—实例方法

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

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的回调函数
 

接口调用-fetch用法

基本使用

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

常用配置选项

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

GET请求

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

前端代码

fetch('http://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('http://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='http://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('http://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('http://localhost:3000/json').then(function(data){       // return data.json();   //  将获取到的数据使用 json 转换对象       return data.text(); //  //  将获取到的数据 转换成字符串      }).then(function(data){       // console.
                
                

                

                                            
上一篇：vue中引入高德地图并多点标注的实现步骤_vue.js_

                                                                
下一篇：vue中计算属性和方法的区别及说明_vue.js_

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网