广告

扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >Vue中前端与后端如何实现交互
  • 362

0
分享到

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

2024-04-02 19:04:59 362人浏览 八月长安
摘要

目录Promise的基本使用基本使用多个请求，链式编程Promise的api—实例方法Promise的API—对象方法（直接通过Promise函数名称调用的方

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()不是正式标准
  • 无论成功与否都会执行
<script type="text/javascript">
    
    // 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">
    
    // 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('http://localhost:3000/a1');
    var p2 = queryData('http://localhost:3000/a2');
    var p3 = queryData('http://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('http://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('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('http://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的http客户端
  • 支持浏览器和node.js
  • 支持promise
  • 能拦截请求和响应
  • 自动转换JSON数据
  • 能转换请求和响应数据

axios的基础用法

axios的常用API

  • get()
  • post()
  • delete()
  • put()

axios 全局配置

配置公共的请求头

axios.defaults.baseURL = 'https://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('http://localhost:3000/adata').then(function(ret){ 
      #  拿到 ret 是一个对象      所有的对象都存在 ret 的data 属性里面
      // 注意data属性是固定的用法，用于获取后台的实际数据
      console.log(ret.data)
      console.log(ret)
    })

get 请求传递参数

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

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

restful 形式传递参数

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

通过params 形式传递参数

前端代码

axios.get('http://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('http://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('http://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('http://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 = 'http://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)
    })

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

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: Vue中前端与后端如何实现交互

本文链接: https://www.lsjlt.com/news/167024.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档
去做题
猜你喜欢
  • Vue中前端与后端如何实现交互
    目录Promise的基本使用基本使用多个请求，链式编程Promise的API—实例方法Promise的API—对象方法（直接通过Promise函数名称调用的方...
    99+
    2022-11-13
  • Vue前端如何实现与后端进行数据交互
    目录vue前端与后端数据交互安装在main.js文件引入使用启动vue和前后端连接直接上图vue前端与后端数据交互 安装 npm install axios --save 在main...
    99+
    2022-11-13
  • Vue前端怎么实现与后端进行数据交互
    这篇文章主要介绍了Vue前端怎么实现与后端进行数据交互的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇Vue前端怎么实现与后端进行数据交互文章都会有所收获，下面我们一起来看看吧。Vue前端与后端数据交互安装npm...
    99+
    2023-06-29
  • springboot+vue 前后端交互实现（mysql+springboot+vue）
    目录 前言一、准备工作二、实现过程1.后端2.前端 前言 编译器：vscode、idea、mysql5.7 技术：springboot+mybatis+mysql+lombok+vue 实现内容：实现前后端数据交互。 实现...
    99+
    2023-08-18
    spring boot vue.js 交互 mysql
  • Vue前端后端的交互方式 axios
    目录语法数据请求封装前言： 大家都知道,只要进行数据交互,肯定就要去请求接口,数据请求的方式有vue-resource axios fetch等方式进行数据集请求...
    99+
    2022-11-13
  • Node中怎么实现前后端交互
    Node中怎么实现前后端交互，针对这个问题，这篇文章详细介绍了相对应的分析和解答，希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。index.html：<!doctype> <...
    99+
    2022-10-19
  • 如何理解Vue前后端数据交互与显示
    目录一、技术概述二、技术详述1. 从接口获取后端数据2. 前端向后端传值的交互3. 显示获取到的数据4. 防止数据联动三、技术问题1. 界面自动刷新2. 获取数据数组出错3. 传值显...
    99+
    2022-11-12
  • golang前后端分离如何实现交互
    在 Golang 中实现前后端分离的交互可以通过以下几种方式：1. RESTful API：将后端独立的服务，提供 RESTful ...
    99+
    2023-10-20
    golang
  • JavaScript怎么实现前后端交互
    这篇文章主要介绍“JavaScript怎么实现前后端交互”，在日常操作中，相信很多人在JavaScript怎么实现前后端交互问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”Ja...
    99+
    2022-10-19
  • 前端ajax与后端交互的示例分析
    这篇文章主要介绍了前端ajax与后端交互的示例分析，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。前端中常常用的与后端交换数据的话，通常是要用...
    99+
    2022-10-19
  • thymeleaf中前后端数据交互怎么实现
    这篇“thymeleaf中前后端数据交互怎么实现”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“thymeleaf中前后端数据...
    99+
    2023-07-02
  • 前端实现滑动按钮AJAX与后端交互的示例代码
    目录html代码css代码效果图JS事件触发flask后端接口参考链接html代码 <div class="switch-box"> <input id="...
    99+
    2022-11-13
  • ajax怎么实现前后端数据交互
    Ajax是一种用于实现前后端数据交互的技术，它可以通过异步请求在不重新加载整个页面的情况下更新部分页面内容。下面是使用Ajax实现前...
    99+
    2023-09-15
    ajax
  • 前端实现滑动按钮AJAX与后端交互的代码怎么写
    这篇“前端实现滑动按钮AJAX与后端交互的代码怎么写”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“前端实现滑动按钮AJAX与...
    99+
    2023-06-29
  • Vue前后端数据交互与显示的示例分析
    小编给大家分享一下Vue前后端数据交互与显示的示例分析，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！一、技术概述将后端所计算的数据呈现在前端页面的相应位置并根据用...
    99+
    2023-06-15
  • Spring MVC前端与后端的ajax交互方法有哪些
    这篇文章主要介绍Spring MVC前端与后端的ajax交互方法有哪些，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！方式一 通过URL传参通过URL挂接参数，如/auth/getUs...
    99+
    2022-10-19
  • Springboot运用vue+echarts前后端交互实现动态圆环图
    目录前言一、环境配置1.1 安装acharts1.2 全局引用二、圆环图前端实现2.1 先在vue页面添加渲染盒子2.2 前端逻辑实现部分2.3 展示（可按自己需求更改前端样式）三、...
    99+
    2022-11-12
  • vue如何结合axios与后端进行ajax交互
    这篇文章给大家分享的是有关vue如何结合axios与后端进行ajax交互的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。以前vue官方推荐的ajax库是vue-resource, ...
    99+
    2022-10-19
  • Vue生命周期与后端交互实现流程详解
    目录表单控制购物车案例v-model进阶（了解）vue生命周期与后端交互电影案例表单控制 1.input：checkbox（单选，多选），radio（单选） 2.代码展示 <!...
    99+
    2022-11-13
    Vue生命周期 Vue后端交互
  • AJAX SpringBoot 前后端数据交互的项目实现
    目录1. Ajax 概述2. 基于 JQuery 的 AJAX 语法1. Ajax 概述 Ajax 的英文全称是 ”Asynchronous JavaScript and...
    99+
    2022-11-13
软考高级职称资格查询
软考职称历年真题下载
软考职称资料下载
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作