jsES6Promise对象和Module语法

Promise对象

理论内容
**Promise是异步编程的一种解决方案
所谓Promise,简单来说就是一个容器,里面保存着某个未来才会结束的事件的结果
Promise对象特点:对象的状态不受外界影响
一旦状态改变,就不会再变,任何时候都是这个结果 pending(进行中)—>fulfilled(已成功) pending(进行中)—>rejected(已失败)
三种状态
1.pending(进行中)
2.fulfilled(已成功)
3.rejected(已失败)
常见状态:
resolved(已定型)
rejected(已失败)
优缺点:
优点:可以将异步操作以同步操作的流程表达出来,Promise对象提供统一的接口,使得控制异步操作更加容易
缺点:无法取消Promise,如果不设置回调函数,内部抛出的错误,不会反应到外部
当处于pending(进行中)状态时,无法得知进展阶段
Promise对象是一个构造函数,用来生成Promise实例
Promise对象的方法:
then()方法分别制定resolved(已定型)状态和rejected(已失败)状态的回调函数,返回的是一个新的Promise实例,因此可以采用链式写法,
即then方法后面再调用另一个then方法(重点)
catch()方法用来指定发生错误的回调函数(使用频率较小)
finally()方法不管执行状态如何都会去执行的操作(使用频率较小)
Promise.all()用于将多个Promise实例,包装成一个新的Promise实例;使用场景:多个异步结果合并到一起
Promise.race()作用与all相同,不同的是数组里面哪个结果获得的快,就返回那个结果,不管结果是成功还是失败
Promise.resolve()将现有对象转为Promise对象,Promise.resolve()参数分为4种情况
1.参数是一个Promise实例,不做任何修改
2.参数是一个thenable对象(具有then方法的对象),转为Promise对象,执行then方法
3.参数不是具有then方法的对象,或者根本不是对象,会返回一个新的对象,状态是resolve
4.不带有任何参数,返回成为一个resolve()状态的Promise对象
Promise.reject()方法返回一个新的Promise实例,实例的状态是rejected(已失败)
**
基本用法:

let p=new Promise(function(resolve,reject){
	//确定Promise状态为成功
	//resolve("hello Promise!");
	//确定Promise状态为失败
	reject("hello Promise error");
}).then(function(result){//成功的回调函数
	console.log(result);//hello Promise
	return String.prototype.toUpperCase.call(result);//显示返回了大写的resolve的Promise实例
},function(error){//失败的回调函数
	console.log(error);//hello Promise error
}).then(function(value){//通过链式写法再调用then方法
	console.log(value);//如果上面的Promise实例没有显示返回resolve的Promise,结果是undefined
	//HELLO PROMISE
},function(value){
	console.log(value);
})

catch()方法基本使用
在异步函数中抛出的错误不会被catch捕获到(setTimeout)
在resplve()后面抛出的错误会被忽略

let p =new Promise(function(resolve,reject){
	//resolve();//在resplve()后面抛出的错误会被忽略
	//setTimeout(function(){//在异步函数中抛出的错误不会被catch捕获到(setTimeout)
	//throw "呀,出错啦!";
	//},1000);
    throw "呀,出错啦!";//抛出错误
    
))
p.catch(function(error){
	console.log(error);//呀,出错啦!
)

Promise.all()方法基本使用

let p1=new Promise(function(resolve,reject){
	resolve("成功了");//确定Promise状态为成功
});
let p2=new Promise(function(resolve,reject){
	resolve("成功了");//确定Promise状态为成功
});
let p3=new Promise(function(resolve,reject){
	reject("失败了");//确定Promise状态为失败
});
//All方法里的数组,如果都为成功,以数组形式返回成功结果,有一个失败,返回失败结果
Promise.All([p1,p2,p3]).then(function(result){
        console.log(result);
}).catch(function(error){
     console.log(error);//失败
})

Promise.race()方法基本使用

let p1=new Promise(function(resolve,reject){
	setInterval(function(){
	resolve("成功了");//确定Promise状态为成功
},3000)	
});
let p2=new Promise(function(resolve,reject){
	setInterval(function(){
	reject("失败了");//确定Promise状态为失败
},1000)	
});
//race方法,数组里面哪个结果获得的快,就返回那个结果,不管结果是成功还是失败
Promise.race([p1,p2]).then(function(result){
        console.log(result);
}).catch(function(error){
     console.log(error);//失败
})

Module语法

Module模块功能由两个命令构成
1.export命令:用于规定模块的对外接口(导出),不能写在块级作用域或者函数内,会报错
2.import命令:用于输入其他模块提供的功能(导入),不能写在块级作用域或者函数内,会报错
import具有提升效果,提升到顶部,import导入的变量是只读的属性,修改会报错
import的from属性:export(导出)文件的路径
as 关键字重命名
注意::由于在Google浏览器中运行es6Module模块代码时会报跨域的错,使用编辑器插件服务器域名打开,
如果出现了Cannot use import statement outside a module报错,在script标签加入type="module"属性
export基本使用:

//export输出变量
var name="张三";
var age=18;
var sex="男";
//方法一
//export var name="张三";
//export var age=18;
//export var sex="男";
//方法二
export {name,age,sex}
//export输出函数或者类
export function add(x,y){
	console.log(x,y);
}
//使用as 关键字重命名
function v1(){}
function v2(){}
export{
	v1 as foo1,
	v2 as foo2
	}

import基本使用:

import {name as ne,age,sex} from "";//from属性是需要导入导出变量的路径
console.log(`我的名字叫${ne}年龄${age}性别${sex}`);
//

Module模块的整体加载

用*号指定一个对象,所有输出值都加载在这个对象上面

//逐一加载
	export function area(radius){
  return Math.PI*radius*radius;
}
	export function circumference(radius){
	return 2*Math.PI*radius;
}
import {area,circumference} from '路径';
console.log(area,circumference);
//整体加载
import * as circle from '路径';
console.log(circle.area,circle.circumference);//通过.来使用

export default命令
为模块指定默认输出
import 引入不加大括号

export default function(){//如果default一个匿名函数,如果是命名函数
console.log("hello");
}
import foo from '路径';//import需要指定变量名接收,import不加大括号引入命名函数名字
foo();//hello

export和import的复合写法
如果在一个模块之中,先输入后输出同一个模块,import语句可以export写在一起

export {foo,bar}from 'my_module';//导致当前模块不能直接使用foo和bar
//相当于
import {foo,bar}from 'my_module';
export {foo,bar};