ES 7 async/await Promise

时间:2023-02-05 00:53:35

如何添加SSL证书实现https请求

https://blog.csdn.net/lupengfei1009/article/details/76828190/

ES 7     async/await

async用来表示函数是异步的,定义的函数会返回一个promise对象,可以使用then方法添加回调函数。

await 可以理解为是 async wait 的简写。await 必须出现在 async 函数内部,不能单独使用。

总结起来,async/await的最基本用法就是:

1. 首先定义一个或多个普通函数,函数必须返回的是Promise对象(事实上你可以返回其他数据,但这就失去了a/a的威力)。Promise对象中可以写任意异步语句,必须有resolve()

  返回非Promise对象的情况:

    ES 7     async/await   Promise

  返回为Promise对象时:

    ES 7     async/await   Promise

2. 然后定义一个async函数,函数语句就是执行那些个普通函数,注意,每个执行语句前面都加上await关键字(async函数的内部一定会有await关键字)。async表示函数里有异步操作,await表示紧跟在后面的表达式需要等待结果。(await后面也可以跟原始类型,但没意义。)

3. 执行这个async函数即可。async函数的返回值是Promise对象,你可以用Promise对象的.then()方法指定下一步的操作。

  async function demo01() {
  return 123;
  }   demo01().then(val => {
   console.log(val);// 123
  });
  若 async 定义的函数有返回值,return 123;相当于Promise.resolve(123),没有声明式的 return则相当于执行了Promise.resolve();
Generator函数的写法:

Generator函数写法

  ES 7     async/await   Promise

  重点注意Generator函数的执行必须靠执行器(it.next())

Promises写法

  ES 7     async/await   Promise

需要错误处理的情况:

  ES 7     async/await   Promise

   注意:因为在a/a领域,已经有.then和.catch来负责错误分支,就根本没必要引入try {} catch(e) {}的写法,这种写法徒增代码复杂度

下面是捕捉错误比较全能的办法,出错了依然可以继续往下执行:

  ES 7     async/await   Promise

参考:作者:microkof

   链接:https://www.jianshu.com/p/8d73e187b9e1

ES 7     async/await   Promise

ES 7     async/await   Promise

ES 7     async/await   Promise

ES 7     async/await   Promise

番外!!!:

  业务是这样的,我有三个异步请求需要发送,相互没有关联,只是需要当请求都结束后将界面的 loading 清除掉即可。警惕写成阻塞方式的同步:

错误示范:

function sleep(second) {

return new Promise((resolve, reject) => {
setTimeout(() => {
resolve('request done! ' + Math.random());
}, second);
})
}

async function bugDemo() {
await sleep(1000);
await sleep(1000);
await sleep(1000);
console.log('clear the loading~');
}

bugDemo();

loading 确实是等待请求都结束完才清除的。但是你认真的观察下浏览器的 timeline 请求是一个结束后再发另一个的(若观察效果请发真实的 ajax 请求)
那么,正常的处理是怎样的呢?

正确示范:

async function correctDemo() {
let p1 = sleep(1000);
let p2 = sleep(1000);
let p3 = sleep(1000);
await Promise.all([p1, p2, p3]);
console.log('clear the loading~');
}
correctDemo();// clear the loading~

async 函数的实现原理,仅作记录:

ES 7     async/await   Promise

注意:

await必须在async函数的上下文中的,放在forEach里面套箭头函数里是不行的,会报错!

后续的学习加深理解例子:

var func = function() {
return new Promise((resolve, reject) => {
if(false){
resolve('返回值');
}else{
reject('错误');
}
})
}
async function asyncFunc(){
await func()
}
asyncFunc().then(function(e){
console.log(111);
console.log(e);
},function(e){
console.log(222);
console.log(e)
return new Promise((resolve, reject) => {
if(false){
resolve('222返回值');
}else{
reject('222错误');
}
})
}).then(function(e){
console.log(333);
console.log(e);
},function(e){
console.log(444);
console.log(e)
})
asyncFunc().catch(function(e){
console.log(e)
})

222
错误
错误
444
222错误

<!--------------------------------------------------------------->

前端文件上传原理

前端网页文件上传一般使用 <input type="file" />来实现。

在 HTML 文档中 <input type="file" />标签每出现一次,一个 FileUpload 对象就会被创建。
该标签包含一个文本输入字段,用来输入文件名,还有一个按钮,用来打开文件选择对话框以便图形化选择文件,该标签的 value属性保存了用户指定的文件的名称。
多选:标签可以通过添加 multiple 属性来支持多选;如果选择了多个文件, 这个值表示第一个被选择的文件路径. JavaScript 可以通过 Input 的 FileList 属性获取到其他的文件路径.
文件信息:可以通过 input.files 属性返回 — 返回值是一个 FileList 对象,这个对象是一个包含了许多 File 文件的列表,列表包含图片的name,type,size等属性。
限制文件类型:你可以使用 input 的 accept 属性,accept 属性接受一个逗号分隔的 MIME 类型字符串。如: accept="image/png, image/jpeg" or accept=".png, .jpg, .jpeg" — PNG/JPEG
选择文件会触发input的onchange事件;
上传:上传文件前 使用FileReader对象读取指定file的文件,并将文件转换为二进制字符串, 并将xhr对象, overrideMimeType 属性设置为text/plain; charset=x-user-defined-binary, 最终后台接收到二进制后再做具体处理。

例子: