ES 7 async／await Promise

如何添加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对象的情况：

　　　　

　　返回为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函数写法

　　

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

Promises写法

　　

需要错误处理的情况：

　　

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

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

　　

参考：作者：microkof

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

番外！！！：

　　业务是这样的，我有三个异步请求需要发送，相互没有关联，只是需要当请求都结束后将界面的 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 函数的实现原理，仅作记录：

注意：

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, 最终后台接收到二进制后再做具体处理。

例子：