vue fetch中的.then()的正确使用方法


Posted in Javascript onApril 17, 2020

先看一段代码:

fetch('http://localhost:3000/books?id=123456',{
  method:'get'
})
.then(function(value1){
  console.log(value1);
  return 'hello';
})
.then(function(value2){
  console.log(value2);
  return 'HelloWorld';
})
/*
.then(function(data){
   console.log(data);
   return data.text();
 })
*/
.then(data=>{
  console.log(data);
})
// 接口
app.get('/books', (req, res) => {
 res.send('传统的URL传递参数!' + req.query.id)
})

vue fetch中的.then()的正确使用方法

在这段代码中我们发现,最初传入的是一个对象,紧接着后一个.then()的传入参数使用了前一个.then()的返回值,换句话说,就是后一个then使用前一个then的封装结果

那么现在去掉注释:

vue fetch中的.then()的正确使用方法

.then(function(value2){
  console.log(value2);
  return 'HelloWorld';
})
.then(function(data){
   console.log(data);
   return data.text();
 })
text()方法属于fetch API的一部分,返回一个Promise实例对象,用于获取后台返回的数据

这段代码中,传入的data是上一步封装的字符串,所以此时用data.text()报错,除非data为对象

下面演示正确使用方式:

fetch('http://localhost:3000/books?id=123456',{
   method:'get'
})
.then(function(data){
   console.log(data);
   console.log(typeof(data));
   return data.text();
})
.then(data=>{
   console.log(data);
   console.log(typeof(data));
})

vue fetch中的.then()的正确使用方法

输出了接口询问的内容,为String类型

到此这篇关于vue fetch中的.then()的正确使用方法的文章就介绍到这了,更多相关vue fetch .then()内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
Javascript实例教程(19) 使用HoTMetal(3)
Dec 23 Javascript
刷新时清空文本框内容的js代码
Apr 23 Javascript
在表单提交前进行验证的几种方式整理
Jul 31 Javascript
js动态移动滚动条至底部示例代码
Apr 24 Javascript
js生成随机数的方法实例
Oct 16 Javascript
JS实现消息来时让网页标题闪动效果的方法
Apr 20 Javascript
微信小程序实现的涂鸦功能示例【附源码下载】
Jan 12 Javascript
Hexo已经看腻了,来手把手教你使用VuePress搭建个人博客
Apr 26 Javascript
微信小程序实现topBar底部选择栏效果
Jul 20 Javascript
基于vue v-for 多层循环嵌套获取行数的方法
Sep 26 Javascript
webpack-mvc 传统多页面组件化开发详解
May 07 Javascript
vantUI 获得piker选中值的自定义ID操作
Nov 04 Javascript
如何基于filter实现网站整体变灰功能
Apr 17 #Javascript
javascript设计模式 ? 解释器模式原理与用法实例分析
Apr 17 #Javascript
javascript设计模式 ? 迭代器模式原理与用法实例分析
Apr 17 #Javascript
vue制作抓娃娃机的示例代码
Apr 17 #Javascript
Vue+tracking.js 实现前端人脸检测功能
Apr 16 #Javascript
tracking.js实现前端人脸识别功能
Apr 16 #Javascript
electron 如何将任意资源打包的方法步骤
Apr 16 #Javascript
You might like
php实现过滤UBB代码的类
2015/03/12 PHP
php限制ip地址范围的方法
2015/03/31 PHP
php基于mcrypt_encrypt和mcrypt_decrypt实现字符串加密解密的方法
2016/07/12 PHP
php中bind_param()函数用法分析
2017/03/28 PHP
转一个日期输入控件,支持FF
2007/04/27 Javascript
简单的js分页脚本
2009/05/21 Javascript
JQUERY1.6 使用方法四 检测浏览器
2011/11/23 Javascript
url参数中有+、空格、=、%、&、#等特殊符号的问题解决
2013/05/15 Javascript
JS实现文件动态顺序载入的方法
2015/03/07 Javascript
jQuery的css() 方法使用指南
2015/05/03 Javascript
D3.js实现柱状图的方法详解
2016/09/21 Javascript
Node.js中process模块常用的属性和方法
2016/12/13 Javascript
JS限制条件补全问题实例分析
2016/12/16 Javascript
JS查找字符串中出现最多的字符及个数统计
2017/02/04 Javascript
JavaScript Base64 作为文件上传的实例代码解析
2017/02/14 Javascript
基于vue实现分页/翻页组件paginator示例
2017/03/09 Javascript
easyui-edatagrid.js实现回车键结束编辑功能的实例
2017/04/12 Javascript
jquery图片放大镜效果
2017/06/23 jQuery
JS动态添加元素及绑定事件造成程序重复执行解决
2017/12/07 Javascript
Vue入门之animate过渡动画效果
2018/04/08 Javascript
JavaScript 中的 this 工作原理
2018/06/20 Javascript
vue element中axios下载文件(后端Python)
2019/05/10 Javascript
微信小程序云开发修改云数据库中的数据方法
2019/05/18 Javascript
[49:05]OG vs Newbee 2019DOTA2国际邀请赛淘汰赛 胜者组 BO3 第二场 8.21.mp4
2020/07/19 DOTA
python查看zip包中文件及大小的方法
2015/07/09 Python
python利用tkinter实现屏保
2019/07/30 Python
Python (Win)readline和tab补全的安装方法
2019/08/27 Python
在python3中实现查找数组中最接近与某值的元素操作
2020/02/29 Python
python中使用input()函数获取用户输入值方式
2020/05/03 Python
Django与AJAX实现网页动态数据显示的示例代码
2021/02/24 Python
使用CSS3实现input多选框自定义样式的方法示例
2019/07/19 HTML / CSS
中国茶叶、茶具一站式网上购物商城:醉品茶城
2018/07/03 全球购物
优秀班主任经验交流材料
2014/06/02 职场文书
影子教师研修方案
2014/06/14 职场文书
高速铁道技术专业求职信
2014/08/09 职场文书
golang操作redis的客户端包有多个比如redigo、go-redis
2022/04/14 Golang