[TOC] ### 1. 介紹 ~~~ 是可以以同步的方式處理異步 ~~~ ### 2.使用 promise ~~~ <script> const promise = new Promise((resolve,reject)=>{ console.log(1); // resolve(2); reject(3) }) promise.then(res=>{ console.log(res); },err=>{ console.log(err); }) console.log(4); </script> ~~~ ### 3. promise then ~~~ function getData(url){ const promise = new Promise((resolve, reject) => { $.ajax({ url, dataType: "jsonp", success: res => { resolve(res) }, error:err=>{ reject(err); } }) }) return promise; } getData("https://api.douban.com/v2/book/search?q=javascript&count=1").then(res=>{ let id = res.books[0].id; return getData(`https://douban.uieee.com/v2/book/${id}`) }).then(res=>{ console.log(res); }) ~~~ ### 4. promise all ~~~ <script> var url = "https://douban.uieee.com/v2/book/2567698"; var url2 = "http://api.douban.com/v2/movie/in_theaters"; var book = $.ajax({url,dataType:"jsonp"}); var movie = $.ajax({url:url2,dataType:"jsonp"}); Promise.all([book,movie]).then(res=>{ let [book,movie]=res; console.log(book); console.log(movie); handledata(book); handledata(movie); }) function handledata(type){ var subjects=type.subjects; var title=type.title; var movies=[] subjects.forEach(ele => { var temp={ imgUrl:ele.images.small } movies.push(temp); }); var readyData={}; readyData[type]={ movies, title, type }; this.setData(readyData); //console.log(type) } </script> ~~~ 5. async 關鍵字 聲明的函數 調用返回的是個promise對象 ~~~ <script> var url= "http://api.douban.com/v2/movie/in_theaters" async function promise(url) { return $.ajax({url,dataType:"jsonp"}) } async function getData(){ //await等后面的函數執行完成后再執行相應代碼 var data =await promise(url); console.log(data); } getData(); </script> ~~~