es6知识总结 模块 承诺加载

模块

ES6 的模块化分为导出（export） @与导入（import）两个模块。

var name='mumu';
function fun(){
	console.log('拟好')
}
class Cat{
	constructor(name){
		this.name=name;
	}
}
export{name,fun}
export default Cat;

import * as obj from './..js'
import Cat,{fun,name] from './..js'
alert(obj.name)
obj.fun()

承诺 promise

当满足一半是完成承诺

var n=new Promise((resolve,reject)=>{
var i=Math.radom();
if(i>0.5){//满足条件执行承诺
	resolve('兑现承诺')
}else{
	reject('不兑现承诺')
}
})
n					//执行承诺
.then(function(res){
	console.log(res)//执行兑现承诺
})
.catch(function(err){//执行成功承诺
	console.log(err)
})

回调承诺

// 小虎看见一个漂亮小小姐姐
// 3 秒中后他鼓起勇气对着小姐姐说 你好能加你一个微信吗？
// 5 秒后对小姐姐说 我非常喜欢你
// 2 秒后对小姐姐寿，邀请你100年后 葬在我们家祖坟里

function fu(str,time){
	return new Promise((resolve,reject)=>{
		setTimeout(()=>{resolve(str)},time)
	})
}
fu('你好能加你一个微信吗？',3000)
.then((res)=>{
	console.log(res);
	return fu('我非常喜欢你？',5000)
	})
	.then(res=>{
		   		console.log(res);
				return fu('邀请你100年后 葬在我们家祖坟里',2000)
				})
				.then(res=>{
				console.log(res); 
})

承诺ajax

var urlA = “https://apis.map.qq.com/ws/location/v1/ip?key=CAABZ-AVSAQ-RDR5L-GTBDJ-HLA4O-A5FDB&output=jsonp&_=1593478015329”;
var urlB = “https://wis.qq.com/weather/common?weather_type=observe|forecast_24h|air&source=pc”;

$(function(){
	function getApl(url){
		return new Promise((resolve,reject)=>{
		$.ajax({
			url:url,
			dataType:"jsonp",
			success:function(res){
				resolve(res);//成功
			},
			errpr:function(err){
				resolve(err);//失败
			},
		})
	})
	}
	var urlA = "https://apis.map.qq.com/ws/location/v1/ip?key=CAABZ-AVSAQ-RDR5L-GTBDJ-HLA4O-A5FDB&output=jsonp&_=1593478015329";
var urlB = "https://wis.qq.com/weather/common?weather_type=observe|forecast_24h|air&source=pc";
	getApl(urlA)
	.then(add=>{// 获取地址
			console.log(add);
			var info = add.result.ad_info;//具体的地址信息
			$(".add").text(info.city);
			return getApi(urlB+`&province=${info.province}&city=${info.city}`)
		})
		.then(data=>{// 获取天气
			console.log(data);
			$(".weather").text(data.data.observe.weather)
			$(".temp").text(data.data.observe.degree)
			$(".img").attr("src",`https://mat1.gtimg.com/pingjs/ext2020/qqindex2018/dist/img/weather/${data.data.observe.weather_code}.svg`)
		})
		.catch(err=>{// 失败
			console.error(err);
		})
})

承诺 图片加载

var arr = [
		"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c0c05274f2fbb55fbccb89622f798907.jpg?w=632&h=340",
		"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/b746a4db2e0473cc076a3a4b9bbe0235.jpg?w=632&h=340",
		"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/816a66edef10673b4768128b41804cae.jpg?w=632&h=340"
	]
	function loadImg(url){
		return new Promise((resolve,reject)=>{
			var img = document.createElement("img");
			img.src = url;
			img.width = 200;
			img.onload = function(){
				resolve(img);
			}
			img.onerror=function(e){
				reject(e)
			}
		})
	}
	Promise.race([
		loadImg(arr[0]),
		loadImg(arr[1]),
		loadImg(arr[2])		
	])
	.then(res=>{
		document.body.append(res)
	})
	.catch(err=>console.error(err))