Vue学习笔记（三） —— 前后端交互

最新推荐文章于 2024-05-13 21:18:20 发布
最新推荐文章于 2024-05-13 21:18:20 发布
阅读量1.6k 收藏 19
点赞数
分类专栏： 管理/方法/理论 web前端 文章标签： promise fetch axios
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mzl87/article/details/107721912
版权

简介

本文主要是为了介绍前端交互的相关知识，而严格来讲，这也不算是Vue的专属知识，但是却是必须要指定的。本文开始简单说了ajax、jquery 的方式，但是随着SPA开发模式的大火，相继出现了一些新的交互方式，而我们应该对这些知识有所了解。此文可以作为后端工程师了解前端交互的入门，对于想要转纯前端的同学应该也有一定的帮助作用。

有兴趣的朋友可以看看之前的两篇文章：

1、前后端交互模式

1.1 接口调用方式

  • 原生ajax
  • 基于jQuery的ajax (主要是基于 dom 的操作)
  • fetch
  • axios

1.2 URL地址格式

1、 传统形式的URL

  • 格式：schema://host:port/path?query#fragment

    • schema ：协议。例如http、https、ftp等
    • host ： 域名或IP地址
    • port ： 端口，http默认端口80，可以省略
    • path ： 路径，例如/abc/a/b/c
    • query ： 查询参数，例如uname=lisi&age=12
    • fragment ： 锚点（哈希hash），用于定位页面的某个位置

一个最简单URL地址必须包含：协议、域名和端口。端口是可以省略的。

  • 符合规则的URL

    • http://www.baidu.com
    • http://www.baidu.com/java/web
    • http://www.baidu.com/java/web?flag=1
    • http://www.baidu.com/java/web?flag=1#function

2、Restful形式的URL

  • HTTP请求方式

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

  • 符合规则的URL地址

    • http://www.test.com/books             GET
    • http://www.test.com/books             POST
    • http://www.test.com/books/123     PUT
    • http://www.test.com/books/123     DELETE

可以看到，有的地址是一样的， 但是它们的提交方式不同。

2. Promise 用法

写在前面

Promise是ES6中引入的一种新的语法，专门用来处理异步编程。

可以通过一个简单的方式来查看Promise的对象情况。如下先定义一个html文件。

<!DOCTYPE html>
<html lang="en">
<head>
    
</head>
<body>
    <script>
        console.dir(Promise)
    </script>
</body>
</html>

在浏览器中打开上面的html文件，然后F12来查看，如下图所示。
在这里插入图片描述

2.1 异步调用

  • 异步效果分析

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

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

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

关于异步依赖需要嵌套，可参考以下代码：

$ajax({
    success: function(data){
        if(data.status ==200){
            $ajax({
                success: function(data){
                    if(data.status ==200){
                        $ajax({
                            success: function(data){
                                if(data.status == 200){
                                    // ....
                                }
                            }
                        });
                    }
                }
            });
        }
    }
});

如果需要嵌套18层，那就是地狱了。所以这种写法也叫“回调地狱”。为了解决这个问题，所以引入了Promise。

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 处理Ajax请求

1、处理原生Ajax

function queryData(){
    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','/data');
        xhr.send(null);
    });
    return p;
}

// 调用
queryData('http://localhost:3000/data')
    .then(function(data){
        console.log(data);
    },function(data){
        console.log(data)
    })

2、发送多次Ajax请求

queryData()
    .then(function(data){
        return queryData();
    })
    .then(function(data){
        return queryData();
    })
    .then(function(data){
        return queryData();
    });

通过多个then的方式，悠雅的解决了ajax的回调地狱问题。

2.5 then参数中的函数返回值

1、返回Promise实例对象

  • 返回的该实例对象会调用下一个then

2、返回普通值

  • 返回的普通值会直接传递给下一个then，通过then参数中函数的参数接收该值

2.6 Promise 常用的 API

1、实例方法

  • p.then()得到异步任务的正确结果
  • p.catch()获取异常信息
  • p.finally()成功与否都会执行（尚且不是正式标准，也许你看到本文时已经是了）

演示代码如下

queryData()
    .then(function(data){
        // 这里处理的是resolve方法
        // 如果添加第二个函数，处理的是reject方法
        console.log(data);
    })
    .catch(function(data){
        // 这里处理的是 reject 方法
        // 所以catch 相当于then 的第二个参数，这种说法不可取，但是可以这里理解
        console.log(data);
    })
    .finally(function(){
        console.log('finished');
    });

2、对象方法

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

大体的语法如下：

Promise.all([p1,p2,p3]).then((result) => {
    console.log(result)
})

Promise.race([p1,p2,p3]).then((result) => {
    console.log(result)
})

3、接口调用 - fecth用法

3.1 fecth 概述

1、基本特征

  • 更加简单的数据获取方式，功能更强大、更灵活，可以看做是xhr(传统的ajax)的升级版

  • 基于Promise实现

2、语法结构

fetch(url).then(fn2)
          .then(fn3)
          ...
          .catch(fn)

具体内容可以查看官网API。

3.2 fecth 的基本用法

fetch('/abc').then(data => {
    // text() 方法是fetch API的一部分，返回一个Promise对象，用于获取后台返回的数据
    return data.text();
}).then(ret => {
    // 注意这里得到的才是最终的数据
    console.log(ret)
})

3.3 fecth 请求参数

1、常用配置选项

  • method(String)：HTTP请求方法，默认为GET(GET、POST、PUT、DELETE)
  • body(String)：HTTP的请求参数
  • headers(Object)：HTTP的请求头，默认为{}

代码的风格如下：

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

2、GET请求方法的参数传递

  • 传统的参数传递
fetch('/abc?id=123').then(data => {
    return data.text();
}).then(ret => {
    // 注意这里得到的才是最终的数据
    console.log(ret);
})
  • RESTFUL风格的参数传递
fetch('/abc/123',{
    method: 'GET'
}).then(data => {
    return data.text();
}).then(ret => {
    // 注意这里得到的才是最终的数据
    console.log(ret);
})

3、DELETE请求方法的参数传递

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

4、POST请求方法的参数传递

  • 第一种用法，query查询字符串
fetch('/books',{
    method: 'POST',
    body:'uname=lisi&pwd=123',
    headers: {
        'Context-Type':'application/x-www-form-urlencoded',
    }
}).then(data => {
    return data.text();
}).then(ret => {
    // 注意这里得到的才是最终的数据
    console.log(ret);
})

结果如下图所示
在这里插入图片描述

  • 第二种用法，json格式
fetch('/books',{
    method: 'POST',
    body: Json.stringify({
        'uname': 'lisi",
        'pwd': '123'
    }),
    headers: {
        'Context-Type':'application/json',
    }
}).then(data => {
    return data.text();
}).then(ret => {
    // 注意这里得到的才是最终的数据
    console.log(ret);
})

结果如下图所示
在这里插入图片描述

5、PUT请求方法的参数传递

// 和post的用法基本一样，这里需要传递修改数据的id
fetch('/books/123',{
    method: 'POST',
    body: Json.stringify({
        'uname': 'lisi",
        'age': 23
    }),
    headers: {
        'Context-Type':'application/json',
    }
}).then(data => {
    return data.text();
}).then(ret => {
    // 注意这里得到的才是最终的数据
    console.log(ret);
})

PUT 和 POST 一样，都可以使用两种方式来处理请求。

3.4 fecth 响应结果

响应数据格式

  • text()：将返回体处理成字符串类型
  • json()：返回结果和JSON.parse(responseText)一样
fetch('/abc').then(data => {
    // return data.text();
    return data.json();
}).then(ret => {
    // 注意这里得到的才是最终的数据
    console.log(ret);
})

// 和下面的效果相同
fetch('/abc').then(data => {
    return data.text();
}).then(ret => {
    // 注意这里得到的才是最终的数据
    var obj = JSON.parse(ret)
    console.log(obj);
})

4、接口调用 - axios用法

4.1 axios 的基本特性

axios(官网：https://github.com/axios/axios)是一个基于Promise用于浏览器和node.js的HTTP客户端。

主要有以下特性：

  • 支持浏览器和node.js
  • 支持Promise(Promise的语法都可以直接使用)
  • 能拦截请求和相应
  • 自动转换JSON数据

4.2 axios 的基本用法

基本形式如下：

axios.get('/adata')
    .then(ret => {
        // data属性名称是固定的，用于获取后台相应的数据
        console.log(ret.data)
    })

4.3 axios 的常用API

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

4.4 axios的参数传递

1、GET传递参数

  • 通过URL传递参数
// 传统传参
axios.get('/adata?id=123')
    .then(ret => {
        console.log(ret.data)
    })

// Restful形式传承
axios.get('/adata/123')
    .then(ret => {
        console.log(ret.data)
    })
  • 通过params选项传递参数
// params 参数是axios专门提供的
// 比较推荐这种方式
axios.get('/adata'，{
    params: {
        id:123
    }
}).then(ret => {
    console.log(ret.data)
})

2、DELETE传递参数

  • 参数传递方式和GET类似
// 传统传参
axios.delete('/adata?id=123')
    .then(ret => {
        console.log(ret.data)
    })

// Restful形式传承
axios.delete('/adata/123')
    .then(ret => {
        console.log(ret.data)
    })

// params 参数传参
axios.delete('/adata'，{
    params: {
        id:123
    }
}).then(ret => {
    console.log(ret.data)
})

3、POST传递参数

  • 通过选项传递参数（默认传递的是json格式的数据）
axios.post('/adata',{
    uname:'tom',
    pwd:123
}).then(ret => {
    console.log(ret.data)
})
  • 通过URLSearchParams传递参数（application/x-www-form-urlencoded）

URLSearchParams是axios提供的标准API

const params = new URLSearchParams();
params.append('param1','value1');
params.append('param2','value2');
axios.post('/api/test',params).then(ret => {
    console.log(ret.data)
})

4、PUT传递参数

  • 参数传递方式和POST类似
axios.put('/adata/123',{
    uname: 'tom',
    pwd: 123
}).then(ret => {
    console.log(ret.data)
})

4.5 axios 的响应结果

响应结果的主要属性

  • data：实际响应回来的数据
  • headers：响应头信息
  • status：响应状态码
  • statusText：响应状态信息
axios.post('/axios-json').then(ret => {
    console.log(ret)
})

4.6 axios 的全局配置

  • axios.defaults.timeout = 3000; // 超时时间
  • axios.defaults.baseURL = 'http://localhost:3000/app'; // 默认地址
  • axios.defaults.header['mytoken'] = 'ogerindxq345348usdgq34498tu'; // 设置请求头

4.7 axios 拦截器

1、请求拦截器

在请求发出之前设置一些信息，代码如下：

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

2、响应拦截器

在获取数据之前对数据做一些加工处理，代码如下：

// 添加一个响应拦截器
axios.interceptors.response.use(function (res) {
    // 在这里对返回的数据机进行处理
    // res不是实际的数据对象，通过res.data获得实际数据
    return res;
},function(err) {
    // 处理响应的错误消息
});

接口调用 - async/await 用法

5.1 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)
})

通过async和await关键字，可以使代码更简洁，因为不需要使用then函数。另外，async返回Promise对象，可以使用then继续处理，如上面的参考代码所示。

5.2 async/await 处理多个步请求

多个异步请求的场景

async function queryData(id) {
    const info = await axios.get('/async1');
    const ret = await axios.get('async2?info=' + info.data);
    return ret;
}

queryData.then(ret => {
    console.log(ret)
})

总结

以上就是关于前端交互的基本知识总结。算是系统学习前端交互知识的一次总结，也是当前SPA开发所必须的知识，同时还方便以后的再次学习。下一篇将介绍的是路由的相关知识，有兴趣可以看看。

寒冰屋
关注
  • 0
    点赞
  • 踩
  • 19
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue学习（四）——前后端交互模式
qq_42264597的博客
04-12 1245
Vue学习（四）——前后端交互模式 一、前后端交互模式 1、接口调用的方法 （1）原生ajax （2）基于Jquery的ajax （3）fetch （4）axios 2、HTTP请求方式 (1)GET 查询 (2)POST 添加 (3)PUT 修改 (4)DELETE 删除 二、Promise用法 promise是异步编程的一种解决方案，从语法上讲，Promise是一个对象，从它可以获取异步操作的消息 使用Promise主要的好处：（1）可以避免多层异步调用嵌套问题（回调函数） ​
Promise原理及常用操作
xyx107的博客
02-19 1069
<script> let promise = new Promise((resolve, reject) => { reject()//可以传参,如：resolve(1111)，那么.then的response可以接受这个参数。reject(2222)，那么.catch的error可以接受这个参数。 } promise.then(response => { //调...
vue3专栏项目 -- 四、前后端结合（下）
最新发布
m0_64931189的博客
05-13 784
在接触后端API以后就遇到了越来越多的异步请求，现在我们就使用async 和 await 改造异步请求。
第3章 Vue前端定义实现与后端数据交互访问
zhoujian_911的专栏
09-22 2673
4、通过'axios'内置包，把从后端获取的数据导出绑定到RoleView.vue视图中 4.1 关于 'axios'内置包的导入 在vue3中'axios'内置包是可以直接在指定的js文件或vue文件中被导入为局部变量，且可以被javascript方法正常调用并执行。 注意：'axios'内置包也是可以被导入在main.js文件中配置全局变量，但是如果想要在js文件或vue文件中正常调用并执行'axios'内置包，依赖需要在js文件或vue文件中定义'axios'内置包的导入，即在vue3中'axio
前后端交互流程
weixin_71243923的博客
10-19 2万+
前后端交互流程
前端和后端是如何交互的
qq_37139060的博客
08-14 879
1、前端请求数据URL由谁来写 在开发中，URL主要是由后台来写好给前端。  若后台在查询数据，需要借助查询条件才能查询到前端需要的数据时，这时后台会要求前端提供相关的查询参数（即URL请求的参数）。 2、接口文档主要由谁来写 接口文档主要由后台设计和修改。  后台直接跟数据打交道，最清楚数据库里有什么数据，能返回什么数据。  前端只是数据的被动接受者，只是接口文档的使用者。  使用过...
学习笔记（一）——邂逅Vuejs
01-08
Vue是一个渐进式框架，可以将Vue作为应用的一部分嵌入其中，带来更丰富的交互体验 特点：解耦视图和数据，可复用的组件，前端路由技术，状态管理，虚拟DOM 学习前提：需要具备一定的HTML、CSS、JavaScript基础 3.Vue...
写笔记程序_java前后端交互.zip
09-02
《Java前后端交互技术详解——基于“写笔记程序”实践》 在当今互联网应用开发中，前后端分离已经成为主流架构模式。本项目“写笔记程序”深入探讨了Java后端与前端之间的交互机制，旨在帮助开发者更好地理解并掌握...
Vue技术栈实现的云笔记项目，印象笔记的功能基本都实现.zip
10-21
这个Vue技术栈实现的云笔记项目不仅涵盖了前端开发的基本技术，还涉及到前后端交互、数据管理、用户体验等多个方面，是学习和实践Vue.js全栈开发的优秀实例。开发者可以通过研究该项目，提升自己的Vue.js及相关技术...
web开发技术——课程笔记.rar
03-17
在Web开发领域，前端技术是构建互联网应用的重要组成部分。这些技术包括HTML、CSS、JavaScript...通过学习以上知识点，你可以掌握Web前端开发的基本技能，从而能够构建功能丰富、交互性强、用户体验优良的网页应用。
乐优商城19天(全)项目笔记
03-02
这些笔记内容详尽，适合对微服务架构感兴趣或者正在学习SpringCloud的开发者，他们可以从中学到如何构建一个完整的微服务电商平台，包括前后端的设计、实现和优化。通过逐个阅读和实践，开发者可以逐步提升自己的...
vue 前后端交互(解决新手的尴尬)
唯心所现，唯识所变
11-30 2746
前后端交互 一、请求时，要求携带参数或者请求头怎么写 二、获取后端数据，如何按照格式获取 一、 1.1 每个请求都要求携带上token， 位置：请求头 那么可以进行全局配置，在上次的博客中有详细说到如何配置。 1.2 某些请求要求携带userId， 位置：请求头 一般来说，userId都是在登录成功的时候，存放在localStorage中，那么我们去那里提取就好啦~ let userId = localStorage.getItem('userId') let config = {
vue与后端接口是如何进行接口请求的原理
qq_40606397的博客
11-18 8006
最近遇到一个很奇怪的问题：前端vue和后端java项目布在同一台服务器（假设该服务器为180服务器），该180服务器无法通过外网访问，前端通过另一台可ping通180服务器和连接外网的服务器（假设为181服务器）进行nginx外网映射访问。此时，我们的设计是希望前端通过内网IP直接对后端接口请求，而不是去走域名进行请求，这样能够在请求时少走一次防火墙，提供接口请求速度。 但是理想很美好，但是现实是最后发现，前端一直无法成功访问到后端接口，一直请求失败。经过多方排查和请教大佬，终于清楚的理解了前后端...
前后端交互,前端vue写
星是河的眼的博客
11-03 1407
文章目录1. VUE.JS案例复习1.1 入门案例1.2 点击事件用法1.3 双向数据绑定1.3.1 页面案例测试1.3.2 双向数据绑定的原理1.4 分支结构用法1.5 循环遍历结构1.6 VUE生命周期函数1.6.1 图例1.6.2 生命周期函数分类1.6.3 初始化时知识点1.6.4 生命周期函数用法2 远程调用2.1 什么是跨域2.2 跨域访问测试案例2.3 远程入门案例测试2.3.1 编辑页面JS2.3.2 前后端调用结果2.4 带参数GET请求2.4.1 编辑页面JS2.4.2 页面效果展现2.
Vue基础（五）——前后端交互
雨的印记的博客
11-26 252
1. 前后端交互概述与URL地址格式 接口调用的方式有哪些 原生ajax 基于jQuery的ajax Fetch Promise url 地址格式有哪些 传统的url Restful形式的url 2. 异步编程问题与Promise概述 2.1 异步调用 异步效果分析 定时任务 Ajax 事件函数 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">
前端到底怎么调用后端服务的？什么是Vue？怎么调用C#写的后端！
Read by heart
08-13 7056
前言 前端的概念很广，可以直观上理解为直接呈现给用户的网页部分，前端的实现涉及多种编程技术或语言，如HTML、CSS、JavaScript、Vue.js、ajax等，它们只需要一个浏览器即可运行。但是有时候前端网页需要的某些功能不好直接在前台（浏览器）中实现，这时候需要借助某种后端编程语言如Java、Python、PHP、C#等，可以在本地服务器上编写代码实现该功能，然后作为一种服务提交给前端进行调用。那么问题来了，前端究竟是怎么调用后端服务的呢？和我一起来一探究竟吧！ 正文 1. 工具准...
前后端交互(小白教学)
热门推荐
一枚数学专业的小码农的博客
10-24 4万+
前后端交互小白教学,超详细
vue3之promise
leveretz的博客
11-08 1532
vue3之promise
vue 函数（三）：Promise函数
w_t_y_y的博客
09-13 8642
一、介绍： 通过打印可以看出Promise是一个构造函数，有all、reject、resolve、then、catch等方法。这样用Promise new出来的对象肯定就有then、catch等方法。 二、用法： created() { var p = new Promise(function (resolve, reject) { //做一些异步操作 setTimeout(function () { console.log('Promise执行.
java和vue怎么用Axios实现前后端交互
05-11
Axios 是一个基于 Promise 的 HTTP 客户端，可用于浏览器和 Node.js。它可以让我们更方便地在前端和后端之间进行数据交互。 在 Java 后端，我们可以使用 Spring Boot 框架来构建 RESTful API，然后使用 Axios 在 Vue 中进行调用。以下是一个简单的示例： 1. 在 Java 后端中，我们可以使用 Spring Boot 来创建一个简单的 RESTful API： ``` @RestController @RequestMapping("/api") public class ExampleController { @GetMapping("/example") public String getExample() { return "Hello from the backend!"; } } ``` 2. 在 Vue 中，我们可以使用 Axios 发起 GET 请求来获取后端数据： ``` <template> <div> <p>{{ message }}</p> </div> </template> <script> import axios from 'axios'; export default { data() { return { message: '', }; }, mounted() { axios .get('/api/example') .then(response => { this.message = response.data; }) .catch(error => { console.log(error); }); }, }; </script> ``` 在这个示例中，我们使用了 Axios 的 GET 方法来获取后端数据，并将返回值赋给了 Vue 的 data 属性 message。如果请求失败，则会在控制台中输出错误信息。 需要注意的是，我们在 Vue 中发起的请求的 URL 是相对于当前页面的，因此需要在 URL 前面加上斜杠 /，以表示根路径。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值