รหัสของฉัน:

let AuthUser = data => {
  return google.login(data.username, data.password).then(token => { return token } )
}

และเมื่อฉันพยายามเรียกใช้สิ่งนี้:

let userToken = AuthUser(data)
console.log(userToken)

ฉันได้รับ:

Promise { <pending> }

แต่ทำไม?

เป้าหมายหลักของฉันคือการได้รับโทเค็นgoogle.login(data.username, data.password)ซึ่งส่งคืนสัญญาเป็นตัวแปร จากนั้นให้ดำเนินการบางอย่างล่วงหน้า

สัญญาจะเข้าสู่ระบบที่รอดำเนินการเสมอตราบใดที่ผลลัพธ์ยังไม่ได้รับการแก้ไข คุณต้องเรียกร้อง.thenให้สัญญาว่าจะจับผลลัพธ์โดยไม่คำนึงถึงสถานะสัญญา (แก้ไขแล้วหรือยังรอดำเนินการ):

let AuthUser = function(data) {
  return google.login(data.username, data.password).then(token => { return token } )
}

let userToken = AuthUser(data)
console.log(userToken) // Promise { <pending> }

userToken.then(function(result) {
   console.log(result) // "Some User token"
})

ทำไมถึงเป็นเช่นนั้น?

คำสัญญาเป็นทิศทางไปข้างหน้าเท่านั้น คุณสามารถแก้ไขได้เพียงครั้งเดียว ค่าที่แก้ไขแล้วของ a Promiseจะถูกส่งไปยังเมธอด.thenหรือ.catch

รายละเอียด

ตามข้อกำหนดสัญญา / A +:

ขั้นตอนการแก้ปัญหาสัญญาคือการดำเนินการเชิงนามธรรมโดยใช้การป้อนคำสัญญาและค่าซึ่งเราระบุว่าเป็น [[แก้ไข]] (สัญญา, x) ถ้า x เป็นตัวแปรที่ทำได้ก็จะพยายามให้สัญญายอมรับสถานะของ x ภายใต้สมมติฐานที่ว่า x มีพฤติกรรมคล้ายคำสัญญาอย่างน้อยที่สุด มิฉะนั้นจะเป็นไปตามสัญญาด้วยค่า x

การปฏิบัติตามสัญญานี้ช่วยให้การดำเนินการตามคำสัญญาสามารถทำงานร่วมกันได้ตราบเท่าที่พวกเขาเปิดเผยวิธีการที่เป็นไปตามสัญญา / A + นอกจากนี้ยังช่วยให้การดำเนินการตามสัญญา / A + สามารถ "หลอมรวม" การใช้งานที่ไม่เป็นไปตามข้อกำหนดด้วยวิธีการที่สมเหตุสมผล

ข้อมูลจำเพาะนี้แยกวิเคราะห์ยากเล็กน้อยดังนั้นเรามาทำลายมันลง กฎคือ:

หากฟังก์ชันใน.thenตัวจัดการส่งคืนค่าค่านั้นPromiseจะแก้ไขด้วยค่านั้น หากดำเนินการส่งกลับอีกPromiseแล้วเดิมแก้ไขด้วยค่ามติของที่ถูกล่ามโซ่Promise ตัวจัดการPromiseถัดไป.thenจะมีค่าที่แก้ไขแล้วของสัญญาผูกมัดที่ส่งคืนในก่อนหน้านี้.thenเสมอ

วิธีการใช้งานจริงได้อธิบายไว้ด้านล่างโดยละเอียด:

1. ผลตอบแทนของ.thenฟังก์ชันจะเป็นค่าที่แก้ไขแล้วของสัญญา

function initPromise() {
  return new Promise(function(res, rej) {
    res("initResolve");
  })
}

initPromise()
  .then(function(result) {
    console.log(result); // "initResolve"
    return "normalReturn";
  })
  .then(function(result) {
    console.log(result); // "normalReturn"
  });

2. ถ้า.thenฟังก์ชันส่งกลับแล้วค่าการแก้ไขสัญญาที่ถูกล่ามโซ่ที่ถูกส่งผ่านต่อไปนี้Promise.then

function initPromise() {
  return new Promise(function(res, rej) {
    res("initResolve");
  })
}

initPromise()
  .then(function(result) {
    console.log(result); // "initResolve"
    return new Promise(function(resolve, reject) {
       setTimeout(function() {
          resolve("secondPromise");
       }, 1000)
    })
  })
  .then(function(result) {
    console.log(result); // "secondPromise"
  });

ฉันรู้ว่าคำถามนี้ถูกถามเมื่อ 2 ปีที่แล้ว แต่ฉันพบปัญหาเดียวกันและคำตอบสำหรับปัญหาคือตั้งแต่ ES6 ซึ่งคุณสามารถawaitส่งคืนค่าฟังก์ชันเช่น:

let AuthUser = function(data) {
  return google.login(data.username, data.password).then(token => { return token } )
}

let userToken = await AuthUser(data)
console.log(userToken) // your data

thenวิธีการส่งกลับสัญญาที่ค้างอยู่ซึ่งสามารถแก้ไขได้โดยการถ่ายทอดสดค่าตอบแทนของการจัดการผลการลงทะเบียนในการเรียกร้องให้thenหรือปฏิเสธโดยการขว้างปาข้อผิดพลาดภายในจัดการที่เรียกว่า

ดังนั้นการโทรAuthUserจะไม่บันทึกผู้ใช้แบบซิงโครนัสในทันที แต่จะส่งคืนสัญญาซึ่งตัวจัดการที่ลงทะเบียนแล้วจะถูกเรียกหลังจากการเข้าสู่ระบบสำเร็จ (หรือล้มเหลว) ฉันขอแนะนำให้เรียกใช้การประมวลผลการเข้าสู่ระบบทั้งหมดโดยใช้thenคำสัญญาการเข้าสู่ระบบ EG ใช้ฟังก์ชันที่มีชื่อเพื่อเน้นลำดับของการไหล:

let AuthUser = data => {   // just the login promise
  return google.login(data.username, data.password);
};

AuthUser(data).then( processLogin).catch(loginFail);

function processLogin( token) {
      // do logged in stuff:
      // enable, initiate, or do things after login
}
function loginFail( err) {
      console.log("login failed: " + err);
}

ดูส่วน MDN เกี่ยวกับสัญญา โดยเฉพาะอย่างยิ่งดูที่ประเภทผลตอบแทนของthen ()

ในการเข้าสู่ระบบตัวแทนผู้ใช้ต้องส่งคำขอไปยังเซิร์ฟเวอร์และรอรับการตอบกลับ เนื่องจากการทำให้แอปพลิเคชันของคุณหยุดดำเนินการโดยสิ้นเชิงในระหว่างการร้องขอแบบไปกลับมักจะทำให้ผู้ใช้มีประสบการณ์ที่ไม่ดีฟังก์ชัน JS ทั้งหมดที่บันทึกคุณเข้าสู่ระบบ (หรือดำเนินการโต้ตอบกับเซิร์ฟเวอร์ในรูปแบบอื่น ๆ ) จะใช้สัญญาหรือสิ่งที่คล้ายกันมาก เพื่อให้ได้ผลลัพธ์แบบอะซิงโครนัส

ตอนนี้โปรดสังเกตด้วยว่าreturnคำสั่งมักจะได้รับการประเมินในบริบทของฟังก์ชันที่ปรากฏดังนั้นเมื่อคุณเขียน:

let AuthUser = data => {
  return google
    .login(data.username, data.password)
    .then( token => {
      return token;
    });
};

คำสั่งreturn token;หมายความว่าฟังก์ชันที่ไม่ระบุตัวตนที่ถูกส่งผ่านไปthen()ควรส่งคืนโทเค็นไม่ใช่ว่าAuthUserฟังก์ชันควร สิ่งที่AuthUserส่งกลับมาคือผลของการโทรgoogle.login(username, password).then(callback);ซึ่งเป็นคำสัญญา

ในที่สุดการโทรกลับของคุณtoken => { return token; }ไม่ได้ทำอะไรเลย สิ่งที่คุณป้อนthen()ต้องเป็นฟังก์ชันที่จัดการโทเค็นไม่ทางใดก็ทางหนึ่ง

สัญญาของคุณอยู่ระหว่างรอดำเนินการให้เสร็จสิ้นโดย

userToken.then(function(result){
console.log(result)
})

หลังจากรหัสที่เหลือของคุณ รหัสทั้งหมดนี้ทำ.then()ตามคำสัญญาของคุณและจับผลลัพธ์สุดท้ายในตัวแปรผลลัพธ์และผลลัพธ์การพิมพ์ในคอนโซล โปรดทราบว่าคุณไม่สามารถเก็บผลลัพธ์ไว้ในตัวแปรส่วนกลางได้ หวังว่าคำอธิบายอาจช่วยคุณได้