模塊

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))

總結

以上是生活随笔為你收集整理的es6知识总结 模块 承诺加载的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。