ES6中的Promise

飛鷹3995發表於2021-06-23
Promise

小編在專案中遇到這樣的需求，就是很多個非同步請求，下一個請求依賴上一個請求的請求結果，這個時候，在es5中的解決方案就是不停的在上一個請求成功的時候，根據返回值 ，再進行請求。倒是也能解決需求，但是寫程式碼的時候，就會寫成這樣：大家還可以關注我的微信公眾號，蝸牛全棧。

$.ajax({
  url:"url1",
  type:"get",
  data:{para1:"data1"},
  success:function(res1){
    $.ajax({
      url:"url2"+res1,
      type:"get",
      data:{para2:"data2"},
      success:function(res2){
        $.ajax({...})
      }
    })
  },error:function(){
  }
})

就先別說維護了，就是寫的時候，一不小心少個小括號或者花括號，那也是一場災難吶。後來小編了解到在es6中，稱這種情況叫callback hell(回撥深淵)。在es6中提供了Promise，可以很好的解決這種問題，當然了，在Vue中，在前後端分離專案中，也大量的使用了這種語法。

一、基本語法

let p = new Promise((resolve,reject) =>{ // 引數有兩個，resolve是成功之後的回撥函式，reject是失敗之後的回撥函式
    setTimeout(() => {
        console.log("school")
        resolve() // 手動呼叫成功回撥函式
    },1000)
}).then(() => { // 這個是成功之後執行的函式，不能省略
    console.log("成功")
},() => { // 這個是失敗後的執行函式，可以省略
    console.log("失敗！")
})
// school  成功

二、非同步之後的引數傳遞

let p = new Promise((resolve,reject) =>{
    setTimeout(() => {
        console.log("school")
        resolve("成功")
    },1000)
}).then((res) => { // 這個是成功之後執行的函式，不能省略，輸出內容通過引數來傳遞
    console.log(res)
},() => { // 這個是失敗後的執行函式，可以省略
    console.log("失敗！")
}) // school 成功

三、例項：通過封裝原生ajax來實現功能(目錄結構：在當前檔案下存在一個static資料夾，資料夾內有三個檔案a.json、b.json、c.json。每個檔案內是一個物件，分別為{a:"我是a"}、{b:"我是b"}、{c:"我是c"})

1、存在部分問題

// 封裝ajax方法
function ajax(url, callback) {
    // 1、建立XMLHttpRequest物件
    var xmlhttp
    if (window.XMLHttpRequest) {
        xmlhttp = new XMLHttpRequest()
    } else { // 相容早期瀏覽器
        xmlhttp = new ActiveXObject('Microsoft.XMLHTTP')
    }
    // 2、傳送請求
    xmlhttp.open('GET', url, true)
    xmlhttp.send()
    // 3、服務端響應
    xmlhttp.onreadystatechange = function () {
        if (xmlhttp.readyState === 4 && xmlhttp.status === 200) {
            var obj = JSON.parse(xmlhttp.responseText)
            // console.log(obj)
            callback(obj)
        }
    }
}

new Promise((resolve,reject) => {
    ajax('static/a.json',res => {
        console.log(res) // {a:"我是a"}
        resolve()
    }) 
}).then(res => {
    console.log("a成功")
    new Promise((resolve,reject) => {
        ajax('static/b.json',res => {
            console.log(res) // {b:"我是b"}
            resolve()
        })
    })
}).then(res => {  // 這個時候就相當於空物件的then
    console.log("b成功")
})
// {a:"我是a"} a成功  b成功  {b:"我是b"}

2、優化版本1

new Promise((resolve,reject) => {
    ajax('static/a.json',res => {
        console.log(res) // {a:"我是a"}
        resolve()
    })
}).then(res => {
    console.log("a成功")
    return new Promise((resolve,reject) => {
        ajax('static/b.json',res => {
            console.log(res) // {b:"我是b"}
            resolve()
        })
    })
}).then(res => {  // 這個時候就相當於空物件的then
    console.log("b成功")
})
// {a:"我是a"} a成功  {b:"我是b"}  b成功

3、優化版本2：封裝return new Promise

function getPromise(url){
    return new Promise((resolve,reject) => {
        ajax(url,res => {
            resolve(res)
        })
    })
}

getPromise("static/a.json")
.then(res => {
    console.log(res)
    return getPromise("static/b.json")
})
.then(res => {
    console.log(res)
    return getPromise("static/b.json")
})
.then(res => {
    console.log(res)
})
// {a:"我是a"}   {b:"我是b"}   {c:"我是c"}

 

相關文章