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

例子:🌰

var reader = new FileRender(); 
xhr.open(“POST”, url); 
xhr.overrideMimeType(‘text/plain; charset=x-user-defined-binary’); 
reader.onload = function(evt) { 
xhr.send(evt.target.result); 
}; 
reader.readAsBinaryString(file);

--------------------- 

作者:qq_8572777886 
来源:CSDN 
原文:https://blog.csdn.net/q857277886/article/details/79092591 
版权声明:本文为博主原创文章,转载请附上博文链接!

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

 

 

小知识:

el-table,是把 width 换成 min-width ,就支持百分比显示啦 !

vue使用v-for循环组件的时候需要,写:key值,否则会报警告