Promise（一）介绍、fs读取文件、AJAX请求
Promise
一、promise介绍与基本使用
1、promise是什么
1.1 抽象表达
1）Promise是一门新的技术（ES6规范）
2）Promise是JS中进行异步编程的新解决方案（ps:旧方案是单纯使用回调函数）
1.2 具体表达
1）从语法上来说：Promise就是一个构造函数
2）从功能上来说：Promise对象用来封装一个异步操作并可以获得其成功/失败的结果值
2、为什么要使用Promise？
2.1 指定回调函数的方式更加灵活
1）旧：必须在启动异步任务前指定
2）promise：启动异步任务->返回promise对象->给promise对象绑定回调函数（甚至可以在异步任务结束后指定/多个）
2.2 支持链式调用，可以解决回调地狱
1）什么是回调地狱？
回调函数嵌套调用，外部回调函数异步执行的结果是嵌套的回调执行的条件（套娃）
二、Promise的初体验
<div class="container"><h2 class="page-header">Promise初体验</h2><button class="btn btn-primary" id="btn">点击抽奖</button>
</div>
<script>//生成随机数function rand(m, n) {return Math.ceil(Math.random() * (n - m + 1) + m - 1);}/*** 点击按钮 1s后显示是否中奖（30%中奖率）* 若中奖弹出 恭喜恭喜，奖品为兰博基尼5元代金券* 若未中奖 很遗憾，未中奖*///获取元素对象const btn = document.querySelector('#btn');//绑定单击事件btn.addEventListener('click', function () {//promise形式实现 resolve解决 reject拒绝const p = new Promise((resolve, reject) => {setTimeout(()=>{//30% 1-100 1-30中奖//获取从1-100的一个随机数let n = rand(1,100);//判断if (n<=30){resolve(n);//将promise对象状态设置为[成功]}else{reject(n);}},1000);});//调用then方法//value 值//reason 理由p.then((value)=>{alert('恭喜恭喜，奖品为兰博基尼5元代金券!您的中奖号码为：'+value);},(reason)=>{alert('很遗憾，未中奖,您的号码为：'+reason);})})
三、Promise实践练习
–fs模块
const fs = require('fs');//Promise形式
let p = new Promise((resolve, reject) => {fs.readFile('content.txt', (err, data) => {//如果出错，则抛出错误if (err) reject(err);//输出文件内容resolve(data);});
});
//调用then
p.then(value => {console.log(value.toString());
}, reason => {console.log(reason);
});
–AJAX请求
<div class="container"><h2 class="page-header">Promise 封装 AJAX 操作</h2><button class="btn btn-primary">点击发送AJAX请求</button></div>
老师讲课时候的api不能用了，随便上网找了一个
<script>//接口地址： https://api.apiopen.top/getJoke//获取元素对象const btn = document.querySelector('.btn');btn.addEventListener('click',function () {//创建Promise对象const p = new Promise((resolve, reject) => {//1.创建对象const xhr = new XMLHttpRequest();//2.初始化xhr.open('GET','https://api.uomg.com/api/get.kg');//3.发送xhr.send();//4.处理响应结果xhr.onreadystatechange = function () {if (xhr.readyState === 4){if (xhr.status>=200&&xhr.status<300){resolve(xhr.response);}else{reject(xhr.status);}}}});//调用then方法p.then((value)=>{console.log(value);},(reason)=>{console.warn(reason);})});</script>
–util.promisify 方法进行promise风格转换
没学过node.js,不太懂
const fs=require('fs'); const path=require('path');const dirname='D:\\HBuilderX\\Workspace\\NodeJS\\ ... 今天配接口,使用fs模块读取json出现了错误'no such file or directory',然后经查终于解决,特此记录. 使用nodejs的fs模块读取文件时习惯用相对路径,但是运行的时候出 ... 什么是nodejs? Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境,nodejs允许javascript代码运行在服务端 1. nodejs不是一门新的编程语 ... vue使用ajax请求后台数据的方法 发布时间:2020-10-15 16:54:41 来源:亿速云 阅读:108 作者:栢白 这篇文章主要介绍了vue使用ajax请求后台数据的方法,具有一定借鉴价值 ... py文件: from django.utils.http import urlquote from rest_framework.views import APIView from django.sh ... PHP 读取文件内容代码(txt,js等) 发布于 2014-10-15 20:15:37 | 128 次阅读 | 评论: 0 | 来源: 网友投递 PHP开源脚本语言PHP(外文名: Hyperte ... jquery中ajax请求后台数据成功后既不执行success也不执行error,此外系统报错:Uncaught SyntaxError: Unexpected identifier at Objec ... 使用JQuery对多个ajax请求串行执行. HTML代码: <a href="#">Click me!</a> <div></div&g ... 背景: 因项目上安全编码要求,需要对angular编译后的文件中的特殊字符进行处理. 解决方案: 1.使用shell脚本(没试过,对shell不熟悉,理论上可行): 2.使用Python: 3.使用n ...Promise（一）介绍、fs读取文件、AJAX请求相关推荐
最新文章
热门文章