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 实用小技巧
Apr 07 Javascript
JQuery触发事件例如click
Sep 11 Javascript
JavaScript插件化开发教程(六)
Feb 01 Javascript
JS实现兼容各浏览器解析XML文档数据的方法
Jun 01 Javascript
JS+CSS实现仿msn风格选项卡效果代码
Oct 22 Javascript
Javascript 调用 ActionScript 的简单方法
Sep 22 Javascript
基于bootstrap的选择框插件icheck
Dec 23 Javascript
jQuery Password Validation密码验证
Dec 30 Javascript
小程序显示弹窗时禁止下层的内容滚动实现方法
Mar 20 Javascript
使用layui前端框架弹出form表单以及提交的示例
Oct 25 Javascript
JS document文档的简单操作完整示例
Jan 13 Javascript
node.js使用http模块创建服务器和客户端完整示例
Feb 10 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设计模式 Delegation(委托模式)
2011/06/26 PHP
PHP与javascript实现变量交互的示例代码
2013/07/23 PHP
ThinkPHP的MVC开发机制实例解析
2014/08/23 PHP
ThinkPHP在Cli模式下使用模板引擎的方法
2015/09/25 PHP
PHP7新特性foreach 修改示例介绍
2016/08/26 PHP
php+ajax无刷新上传图片的实现方法
2016/12/06 PHP
Yii2实现多域名跨域同步登录退出
2017/02/04 PHP
document.all的一个比较完整的总结及案例
2013/01/31 Javascript
一个JavaScript防止表单重复提交的实例
2014/10/21 Javascript
jquery中radio checked问题
2015/03/16 Javascript
详解JavaScript ES6中的Generator
2015/07/28 Javascript
JS实现带提示的星级评分效果完整实例
2015/10/30 Javascript
给angular加上动画效遇到的问题总结
2016/02/17 Javascript
JavaScript第一篇之实现按钮全选、功能
2016/08/21 Javascript
JavaScript基于DOM操作实现简单的数学运算功能示例
2017/01/16 Javascript
详解ES6之用let声明变量以及let loop机制
2017/07/15 Javascript
ES6中的rest参数与扩展运算符详解
2017/07/18 Javascript
简单说说如何使用vue-router插件的方法
2019/04/08 Javascript
vue实现跨域的方法分析
2019/05/21 Javascript
[02:33]DOTA2英雄基础教程 司夜刺客
2013/12/04 DOTA
[05:09]第二届DOTA2亚洲邀请赛决赛日比赛集锦:iG 3:0 OG夺冠
2017/04/05 DOTA
[10:21]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Aster 选手采访
2021/03/11 DOTA
python使用any判断一个对象是否为空的方法
2014/11/19 Python
整理Python最基本的操作字典的方法
2015/04/24 Python
在Python程序中操作文件之flush()方法的使用教程
2015/05/24 Python
浅谈DataFrame和SparkSql取值误区
2018/06/09 Python
解决Mac安装scrapy失败的问题
2018/06/13 Python
Django分页查询并返回jsons数据(中文乱码解决方法)
2018/08/02 Python
django解决跨域请求的问题
2018/11/11 Python
CSS3 @font-face属性使用指南
2014/12/12 HTML / CSS
BNKR中国官网:带你感受澳洲领先潮流时尚
2018/08/21 全球购物
后勤园长自我鉴定
2013/10/17 职场文书
舞蹈比赛获奖感言
2014/02/04 职场文书
中秋寄语大全
2014/04/11 职场文书
教师个人查摆剖析材料
2014/10/14 职场文书
幽默导游词应该怎么写?
2019/08/26 职场文书