一.Promise的作用是什么?
当有多个请求之间有相互依赖关系（紧接着的请求需要上一次请求的返回结果），这时promise的作用就凸显出来了。
二.如何使用promise?
???????????new ?Promise(function(resolve,reject){ ???????????????1.处理语句 ???????????????if(处理成功){ ???????????????????resolve([参数]); ???????????????}else{ ???????????????????reject([参数]); ???????????????} ???????????});三.promise的两个原型方法(对方方法) then(),catch()
1.当前promise对象标志成resolve状态时,调用 then(function([参数]){处理语句})
2.当前promise对象标志成reject状态时,调用catch(function([参数]){处理语句})
四.Promise.all() : 静态方法
当all中全部promise对象标志成resolve时,当前对象才返回resolve状态,否则,只有一个返回reject状态,当前对象返回reject状态
//判断信息为true时,输出hello ??false时，输出bye ???????????function fn(msg){ ???????????????//创建promise对象 ???????????????let pm = new Promise(function(resolve,reject){ //resolve:表示成功的状态，reject:表示失败的状态 ???????????????????if(msg){ ???????????????????????resolve(); //标志成功 ???????????????????}else{ ???????????????????????reject(); //标志失败 ???????????????????} ???????????????}); ???????????????return pm; ???????????} ???????????var p = fn(1); ?//p接收的是调用函数后返回的promise对象 ???????????????????????p.then(function(){ ???????????????alert(‘hello‘); ???????????}); ???????????p.catch(function(){ ???????????????alert(‘bye‘); ???????????});加载一张图片
???????????//创建一个数组，存放图片地址 ???????????const arrImgs = [‘img/0.jpg‘,‘img/1.jpg‘,‘img/2.jpg‘]; ???????????//加载图片 ???????????function loadImg(src){ ???????????????return new Promise(function(resolve,reject){ ???????????????????//处理加载图片的过程 ???????????????????//Image ??创建img对象 ???????????????????var img = new Image(); //document.createElement(‘img‘); ???????????????????img.src = src; ?//给img对象添加src属性 ???????????????????img.onload = function(){ ???????????????????????resolve(this); ???????????????????} ???????????????????//错误事件 ???????????????????img.onerror = function(){ ???????????????????????reject(new Error(‘图片加载失败！‘)); ???????????????????} ???????????????}); ???????????} ???????????var oP = loadImg(arrImgs[1]); ???????????oP.then(function(img){ ???????????????document.body.appendChild(img); //当浏览器加载图片成功后，将图片放到页面中。 ???????????}).catch(function(err){ ???????????????console.log(err); ???????????})解决ajax依赖导入的问题
从内容中获取地址
???????????//获取页面元素 ???????????let oBtn = document.getElementById("btn"); ???????????let oDiv = document.getElementById("box"); ???????????oBtn.onclick = function(){ ???????????????new Promise(function(resolve,reject){ ???????????????????ajax.get(‘1.txt‘,function(data){ ???????????????????????resolve(data); ???????????????????}) ???????????????}).then(function(data){ ???????????????????return new Promise(function(resolve,reject){ ???????????????????????ajax.get(data,function(str){ ???????????????????????????resolve(str); ???????????????????????}) ???????????????????}) ???????????????}).then(function(data){ ???????????????????ajax.get(data,function(str){ ???????????????????????oDiv.innerHTML = str; ???????????????????}) ???????????????}) ???????????}==通过对象调用的方法==是对象方法;
==通过构造函数调用的方法==是静态方法. //Math ?
string.fromCharCode()
???????????//通过对象调用的方法，称为对象方法 ???????????//通过构造函数调用的方法，称为静态方法 Math ????String.fromCharCode() ???????????const arrImgs = [‘img/0.jpg‘,‘img/1.jpg‘,‘img/2.jpg‘]; ???????????function loadImg(src){ ???????????????//创建Promise对象 ???????????????return new Promise(function(resolve,reject){ ???????????????????let img = document.createElement(‘img‘); ???????????????????img.src = src; ???????????????????img.onload = function(){ ???????????????????????resolve(this); ???????????????????} ???????????????????img.onerror = function(){ ???????????????????????reject(‘图片加载失败！‘); ???????????????????} ???????????????}) ???????????} ???????????//Promise.all([]) :数组中返回的promise对象全部是resolve状态时，当前的promise对象都是resolve状态；只要有一个返回的是reject,当前的promise对象就是reject状态。 ???????????????????????let oP = Promise.all([loadImg(arrImgs[0]),loadImg(arrImgs[7]),loadImg(arrImgs[2])]); ???????????oP.then(function(imgs){ ???????????????imgs.forEach(function(value){ ???????????????????document.body.appendChild(value); ???????????????}) ???????????}).catch(function(str){ ???????????????console.log(str); ???????????})jsonp 掌握其思想
src属性：具有跨域的特点
<html> ???<head> ???????<meta charset="UTF-8"> ???????<title></title> ???</head> ???<body> ???????<input type="text" name="txt" id="txt" value="" /> ???????<ul id=‘ul1‘></ul> ???????<script type="text/javascript"> ???????????//src属性：具有跨域的特点 ???????????//https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=aaaa&cb= ???????????let otxt = document.getElementById("txt"); ???????????let oUl = document.getElementById("ul1"); ???????????otxt.onkeyup = function(){ ???????????????//创建script标签 ???????????????let sc = document.createElement(‘script‘); ???????????????//设置src属性 ???????????????sc.src = "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=" + this.value + "&cb=fn"; ???????????????document.getElementsByTagName(‘head‘)[0].appendChild(sc); ???????????} ???????????????????????????????????function fn(data){// ?????????????console.log(data); ???????????????var arr = data.s; ???????????????for(var i = 0,len = arr.length;i < len;i ++){ ???????????????????let li = document.createElement(‘li‘); ???????????????????li.innerHTML = arr[i]; ???????????????????oUl.appendChild(li); ???????????????} ???????????} ???????</script> ???</body></html>20、promise与ajax ?????jsonp
原文地址：https://www.cnblogs.com/zhongchao666/p/9275581.html