首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >【Vue_03】前后端交互

【Vue_03】前后端交互

作者头像
用户8250147
发布于 2021-02-04 06:45:41
发布于 2021-02-04 06:45:41
1.1K00
代码可运行
举报
文章被收录于专栏:黑马黑马
运行总次数:0
代码可运行

一、Promise

1. Promise的基本使用
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<script>
	var p = new Pormise(function(resolve, reject) {
	     // 这里实现异步调用
	
	     // 调用成功
	     resolve("success");
	
	     // 调用失败
	     reject("error");
	 });
	
	 p.then(function(data) {
	     // 成功的情况
	 },function(info) {
	     // 失败的情况
	 });
</script>   
2. 基于Promise发送Ajax请求
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<script>
    function request(url) {
        // 创建一个 Promise 实例
        var p = new Pormise(function(resolve, reject) {
            // 获取与后台交换数据的对象 XMLHttpRequest
            var xhr = new XMLHttpRequest();

            /* 
                - readyState 改变时触发 onreadystatechange 事件
                - readyState: XMLHttp 请求的当前状态
                    0: 请求未初始化
                    1: 服务器连接已建立
                    2: 请求已接收
                    3: 请求处理中
                    4: 请求已完成,且响应已就绪
                - status:响应状态码
                    200: "OK"
                    404: 未找到页面
            */
            xhr.onreadystatechange =  function() {
                if(xhr.readyState != 4) {
                    return ;
                }
                
                if(xhr.readyState == 4 && xhr.status == 200) {
                    // 请求成功的情况,通过 responseText 属性来获取由服务器返回的数据
                    resolve(xhr.responseText);
                } else {
                    // 处理请求失败
                    reject("请求失败");
                }
            }
            
            /* 
                初始化一个请求
                open(method, url, async, username, password)
                    method: 请求方式
                    url: 请求的地址
                    async: 请求是否异步,默认异步
                    userrname、password: 可选,为 url 的授权提供认证
            */
            xhr.open("get", url);

            /* 
                发送 http 请求
                send(参数可选)
                    null: 代表只有 url 没有数据体。例如:get 请求
                    数据体:除了请求头信息还包含具体数据的数据体。例如:post请求
            */
            xhr.send(null);
        });

        // 返会 Promise 实例
        return p;
    }

    // 请求数据
    request("http://localhost/first/data").then(
        function(data) {    // 参数1:处理请求成功的方法
            console.log(data);
        },function(info) {  // 参数2:处理请求失败的方法,可以省略
            console.log(info);
        }
    );
</script>      
3. Promise的常用API
  • 实例方法 then(方法 1, 方法 2) :方法 1 处理异步正常的数据,方法 2 处理异步失败(可以不写), 链式编程时需要在上一个 then 中使用 return catch(方法) :处理异步失败,与 .then 的方法 2 效果一致 finally(方法) :无论如何最后都会执行的方法
  • 静态方法 all(数组) :接收一个数组,每个数组元素都是一个 Promise 实例,当这个数组中的 Promise 实例全部返回时,方法执行结束 race(数组) : 接收一个数组,每个数组元素都是一个 Promise 实例,当这个数组中的 Promise 实例有一个返回时,方法执行结束

二、fetch

Fetch 是新的 Ajax 的解决方案,会返回一个 Promise Fetch 不是 Ajax 的进一步封装,而是原生 JS ,没有使用 XMLHttpRequest

1. fetch的基本使用
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<script>
	// fetch的参数为请求的路径,默认为 get 请求
    fetch("url")
    .then(
    	function(data) {  // 成功返回的 data 是一个 Promise 实例,不能直接拿到数据
    		// 需要使用 fetch 的方法 text() 取出数据
    		data.text();
    	},function(info) { // 失败返回的 info 我们可以直接拿到数据
    	}
    );
</script>
2. fetch的Http请求

get/delete

post/put

3. fetch的响应格式

data.json() : 将返回的数据转为 json data.text() : 将返回数据转为字符串

三、axios

1. axios的基本使用

get /delete请求

post/put请求

2. axios全局配置

配置公共的请求头,配置之后再 url 中可以省略公共的请求头 axios.defaults.baseURL = 'http://localhost/test'; —————————— 配置超时时间 axios.defaults.timeout = 3000; —————————— 配置公共的 post 的 Content-Type axios.defaults.headers.post['Content-Type'] = 'application/json';

3. axios拦截器

拦截器分类

1.请求拦截器 请求拦截器的作用是在请求发送前进行一些操作。 2.响应拦截器 响应拦截器的作用是在接收到响应后进行一些操作。

请求拦截器

响应拦截器

四、ES7新方法 (async/await)

async 作为一个关键字放到方法前面 async 都会隐式的返回一个 Promise 实例 await 只能在 async 修饰的方法内使用,且 await 不能单独使用 await 后可以跟一个 Promise 实例

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<script>
	// 配置公共的请求头
    axios.defaults.baseURL="http://localhost/test";

    async function request() {
        // 添加 await 之后,当前 await 返回结果之后才会执行下面的代码
        var info = await.get("data1");
        var ret = await axios.get("data2?info=" + info.data);
        return ret.data;
    }

    request().then(function(data){
        console.log(data);
    });
</script>
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
Vue前端交互
1、URL地址格式。 答:1)、传统形式的URL。格式schema://host:port/path?query#fragment。   a、schema,协议,例如http、https、ftp等等。
别先生
2020/05/04
3.1K0
从零开始学VUE之网络模块(Axios)
Axios 功能特点 在浏览器中发送XHR请求 在Node.js中发送http请求 支持 Promise API 拦截请求和响应 支持多种请求方式 axios(config) axios.request(config) axios.get(url[,config]) axios.delete(url[,config]) axios.head(url[,config]) axios.post(url,data[,config]) axios.put(url,data[,config]) axios.patch
彼岸舞
2021/07/01
3520
Vue 09.前后端交互
用fetch来获取数据,如果响应正常返回,我们首先看到的是一个response对象,其中包括返回的一堆原始字节,这些字节需要在收到后,需要我们通过调用方法将其转换为相应格式的数据,比如JSON,BLOB或者TEXT等等
LittlePanger
2020/04/14
6.2K0
都0202年了,你还不会前后端交互吗
为了方便我采用 Python Flask 编写 API,如果有其他 api 服务搭建的同学,可以移步:四种方式搭建 API,总有一款适合你
Gorit
2021/12/08
1.9K0
都0202年了,你还不会前后端交互吗
Axios入门与源码解析
(1) 需求: 项目中有部分接口需要的配置与另一部分接口需要的配置不太一样, 如何处理
鱼找水需要时间
2023/02/16
3.1K0
Axios入门与源码解析
Vue 相关学习笔记(二)
常用特性应用场景 1 过滤器 Vue.filter 定义一个全局过滤器 <tr :key='item.id' v-for='item in books'> <td>{{item.id}}</td> <td>{{item.name}}</td> <!-- 1.3 调用过滤器 --> <td>{{item.date | format('yyyy-MM-dd hh:mm:ss')}}</td>
用户6808043
2022/02/24
5.7K0
Vue 前后端交互基础
  在前后端不分离的应用模式中,前端页面看到的效果都是由后端控制,由后端渲染页面或重定向,也就是后端需要控制前端的展示,前端与后端的耦合度很高。这种应用模式比较适合纯网页应用,但是当后端对接 App 时,App 可能并不需要后端返回一个 HTML 网页,而仅仅是数据本身,所以后端原本返回网页的接口不再适用于前端 App 应用,为了对接 App 后端还需再开发一套接口。
Demo_Null
2020/09/28
2.3K0
Vue 前后端交互基础
浅学前端:Vue篇(一)
官方浏览器插件,用于调试 Vue.js 应用。你可以检查组件、vuex store 和事件等。
传说之下的花儿
2023/11/11
3840
浅学前端:Vue篇(一)
ajax和fetch、axios的优缺点以及比较
前端是个发展迅速的领域,前端请求自然也发展迅速,从原生的XHR到jquery ajax,再到现在的axios和fetch。
前端迷
2018/10/29
9.5K0
一文读懂Axios核心源码思想
我们以特性作为入口,解答上述问题的同时一起感受下 Axios 源码极简封装的艺术。
@超人
2021/11/17
9340
Axios 前后端交互工具学习
  Axios是一个异步请求技术,核心作用就是用来在页面中发送异步请求,并获取对应数据在页面中进行渲染,页面局部更新技术Ajax.
RAIN7
2022/09/28
7900
05 . Vue前端交互,fetch,axios,以asyncawait方式调用接口使用及案例
通过URLSearchParams传递参数(application/x-www-form-urlencoded)
iginkgo18
2020/11/24
3.3K0
05 .  Vue前端交互,fetch,axios,以asyncawait方式调用接口使用及案例
axios网络交互应用-Vue
Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。
达达前端
2019/12/26
8710
【axios】使用json-server 搭建REST API
1.1 API 的分类 REST API: restful (Representational State Transfer (资源)表现层状态转化) (1) 发送请求进行CRUD 哪个操作由请求方式来决定 (2) 同一个请求路径可以进行多个操作 (3) 请求方式会用到GET/POST/PUT/DELETE 非REST API: restless (1) 请求方式不决定请求的CRUD 操作 (2) 一个请求路径只对应一个操作 (3) 一般只有GET/POST 1.2 使用json-server 搭建RES
玖柒的小窝
2021/10/05
3.2K0
【axios】使用json-server 搭建REST API
面试官不要再问我axios了?我能手写简易版的axios
axios作为我们工作中的常用的ajax请求库,作为前端工程师的我们当然是想一探究竟,axios究竟是如何去架构整个框架,中间的拦截器、适配器、 取消请求这些都是我们经常使用的。
@超人
2021/07/29
6990
面试官不要再问我axios了?我能手写简易版的axios
面试官:Vue项目中有封装过axios吗?怎么封装的?
基于 XMLHttpRequest 服务来执行 HTTP 请求,支持丰富的配置,支持 Promise,支持浏览器端和 Node.js 端。自Vue2.0起,尤大宣布取消对 vue-resource 的官方推荐,转而推荐 axios。现在 axios 已经成为大部分 Vue 开发者的首选
@超人
2021/02/26
2.1K0
前端成神之路-vue04
接口调用方式 原生ajax 基于jQuery的ajax fetch axios 异步 JavaScript的执行环境是「单线程」 所谓单线程,是指JS引擎中负责解释和执行JavaScript代码的线程只有一个,也就是一次只能完成一项任务,这个任务执行完后才能执行下一个,它会「阻塞」其他任务。这个任务可称为主线程 异步模式可以一起执行多个任务 JS中常见的异步调用 定时任何 ajax 事件函数 promise 主要解决异步深层嵌套的问题 promise 提供了简洁的API 使得异步操作更加容易 <
海仔
2021/03/20
3.8K0
HTTP实用指南 - 笔记
HTTP( Hyper Text Transfer Protocol ) 模型如下图所示,是一个应用层(见上图)的协议,基于 TCP 协议,它有如下特点:
TagBug
2023/03/17
9510
HTTP实用指南 - 笔记
【JS】1942- 你知道 XHR 和 Fetch 的区别吗?
现如今,网站开发普遍采用前后端分离的模式,数据交互成为了不可或缺的关键环节。在这个过程中,XHR 和 Fetch API 是两种最常见的方法,用于从 Web 服务器获取数据。XHR 是一种传统的数据请求方式,而 Fetch API 则代表了现代 Web 开发的新兴标准。接下来,我们将一同深入学习它们的使用方法和适用场景。
pingan8787
2024/02/06
7320
【JS】1942- 你知道 XHR 和 Fetch 的区别吗?
如何在Vue项目中封装axios
axios 是一个基于 XMLHttpRequest 的轻量级HTTP客户端,适用于浏览器和Node.js环境。它提供以下特性:
全栈若城
2024/10/13
2920
相关推荐
Vue前端交互
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档