函数then()在JavaScript中是什么意思?

2020/10/06 21:21 · javascript ·  · 0评论

我一直在看类似的代码:

myObj.doSome("task").then(function(env) {
    // logic
});

哪里then()来的?

处理JavaScript中异步调用的传统方法是使用回调。假设我们必须对服务器进行三个调用,一次又一次地调用,以设置我们的应用程序。使用回调,代码可能类似于以下内容(假设使用xhrGET函数进行服务器调用):

// Fetch some server configuration
    xhrGET('/api/server-config', function(config) {
        // Fetch the user information, if he's logged in
        xhrGET('/api/' + config.USER_END_POINT, function(user) {
            // Fetch the items for the user
            xhrGET('/api/' + user.id + '/items', function(items) {
                // Actually display the items here
            });
        });
    });

在此示例中,我们首先获取服务器配置。然后,基于此,我们获取有关当前用户的信息,然后最终获得当前用户的项目列表。每个xhrGET调用都采用一个回调函数,该响应函数在服务器响应时执行。

当然,现在嵌套的级别越多,代码越难读取,调试,维护,升级以及基本使用。这通常称为回调地狱。另外,如果需要处理错误,则可能需要将另一个函数传递给每个xhrGET调用,以告诉它在发生错误的情况下需要执行的操作。如果我们只想拥有一个常见的错误处理程序,那是不可能的。

Promise API旨在解决此嵌套问题和错误处理问题。

Promise API提出以下建议:

  1. 每个异步任务将返回一个promise对象。
  2. 每个promise对象都有一个then可以接受两个参数的success
    函数,一个
    error处理程序和一个处理程序。
  3. 异步任务完成后,函数中的成功错误处理程序then将仅被调用一次
  4. then函数还将返回promise,以允许链接多个调用。
  5. 每个处理程序(成功或错误)都可以返回一个value,它将作为argument链中promise传递给下一个函数
  6. 如果一个处理程序返回一个promise(发出另一个异步请求),则仅在该请求完成后才调用下一个处理程序(成功或错误)。

因此,之前的示例代码可能会使用promise和$httpservice(在AngularJs中)转换为以下内容

$http.get('/api/server-config').then(
    function(configResponse) {
        return $http.get('/api/' + configResponse.data.USER_END_POINT);
    }
).then(
    function(userResponse) {
        return $http.get('/api/' + userResponse.data.id + '/items');
    }
).then(
    function(itemResponse) {
        // Display items here
    }, 
    function(error) {
        // Common error handling
    }
);

传播成功与错误

链接诺言是一项非常强大的技术,它使我们能够完成许多功能,例如让服务进行服务器调用,对数据进行一些后处理,然后将处理后的数据返回给控制器。但是,当我们使用
promise链条时,需要牢记一些注意事项。

考虑以下promise具有三个承诺的假设链:P1,P2和P3。每个promise都有成功处理程序和错误处理程序,因此P1的S1和E1,P2的S2和E2,P3的S3和E3:

xhrCall()
  .then(S1, E1) //P1
  .then(S2, E2) //P2
  .then(S3, E3) //P3

在没有错误的正常情况下,应用程序将流经S1,S2,最后流经S3。但是在现实生活中,事情从未如此顺利。P1可能遇到错误,或者P2可能遇到错误,从而触发E1或E2。

考虑以下情况:

•我们在P1中从服务器收到成功的响应,但是返回的数据不正确,或者服务器上没有可用的数据(认为是空数组)。在这种情况下,对于下一个承诺P2,它应该触发错误处理程序E2。

•我们收到关于承诺P2的错误,触发了E2。但是在处理程序内部,我们从缓存中获取了数据,以确保应用程序可以正常加载。在这种情况下,我们可能要确保在E2之后调用S3。

因此,每次我们编写成功或错误处理程序时,都需要进行调用-给定当前函数,对于诺言链中的下一个处理程序,此诺言是成功还是失败?

如果我们要为链中的下一个诺言触发成功处理程序,我们可以从成功或错误处理程序中返回一个值

另一方面,如果我们要为链中的下一个promise触发错误处理程序,则可以使用一个deferred对象并调用其reject()方法来实现

现在什么是延期对象?

jQuery中的延迟对象代表一个工作单元,该工作单元稍后通常会异步完成。一旦完成工作单元,deferred就可以将对象设置为已解决或失败。

一个deferred对象包含一个promise对象。通过promise对象,您可以指定工作单元完成时将发生的情况。您可以通过在promise对象上设置回调函数来实现

jQuery中的延迟对象:https : //api.jquery.com/jquery.deferred/

AngularJs中的延迟对象:https ://docs.angularjs.org/api/ng/service/ $ q

then()函数与在某些库或框架(如jQuery或AngularJS)中使用的“ Javascript Promise”相关。

promise是用于处理异步操作的模式。Promise允许您调用一种名为“ then”的方法,该方法可让您指定用作回调的函数。

有关更多信息,请参见:http : //wildermuth.com/2013/8/3/JavaScript_Promises

对于Angular承诺:http : //liamkaufman.com/blog/2013/09/09/using-angularjs-promises/

据我所知,(在撰写本文时)没有内置then()方法javascript

看来,无论doSome("task")返回什么,都有一个名为的方法then

如果您将返回结果记录doSome()到控制台,则应该能够看到返回内容的属性。

console.log( myObj.doSome("task") ); // Expand the returned object in the
                                     //   console to see its properties.

更新(自ECMAScript6起):-

.then()功能已包含在纯javascript中。

此处的Mozilla文档中

then()方法返回一个Promise。它有两个参数:Promise成功和失败案例的回调函数。

反过来,Promise对象定义为

Promise对象用于延迟和异步计算。Promise表示尚未完成的操作,但预计会在将来进行。

即,该值Promise充当尚未计算但将来会解析的值的占位符。并且该.then()函数用于在解决Promise时关联要在Promise上调用的函数-成功还是失败。

这是我为自己做的事情,目的是弄清楚事情是如何工作的。我想其他人也可以找到这个具体的例子有用:

doit().then(function() { log('Now finally done!') });
log('---- But notice where this ends up!');

// For pedagogical reasons I originally wrote the following doit()-function so that 
// it was clear that it is a promise. That way wasn't really a normal way to do 
// it though, and therefore Slikts edited my answer. I therefore now want to remind 
// you here that the return value of the following function is a promise, because 
// it is an async function (every async function returns a promise). 
async function doit() {
  log('Calling someTimeConsumingThing');
  await someTimeConsumingThing();
  log('Ready with someTimeConsumingThing');
}

function someTimeConsumingThing() {
  return new Promise(function(resolve,reject) {
    setTimeout(resolve, 2000);
  })
}

function log(txt) {
  document.getElementById('msg').innerHTML += txt + '<br>'
}
<div id='msg'></div>

这是一个小JS_Fiddle。

then is a method callback stack which is available after a promise is resolved it is part of library like jQuery but now it is available in native JavaScript and below is the detail explanation how it works

You can do a Promise in native JavaScript : just like there are promises in jQuery, Every promise can be stacked and then can be called with Resolve and Reject callbacks, This is how you can chain asynchronous calls.

I forked and Edited from MSDN Docs on Battery charging status..

What this does is try to find out if user laptop or device is charging battery. then is called and you can do your work post success.

navigator
    .getBattery()
    .then(function(battery) {
       var charging = battery.charging;
       alert(charging);
    })
    .then(function(){alert("YeoMan : SINGH is King !!");});

Another es6 Example

function fetchAsync (url, timeout, onData, onError) {
}
let fetchPromised = (url, timeout) => {
    return new Promise((resolve, reject) => {
        fetchAsync(url, timeout, resolve, reject)
    })
}
Promise.all([
    fetchPromised("http://backend/foo.txt", 500),
    fetchPromised("http://backend/bar.txt", 500),
    fetchPromised("http://backend/baz.txt", 500)
]).then((data) => {
    let [ foo, bar, baz ] = data
    console.log(`success: foo=${foo} bar=${bar} baz=${baz}`)
}, (err) => {
    console.log(`error: ${err}`)
})

Definition :: then is a method used to solve Asynchronous callbacks

this is introduced in ES6

请在此处找到适当的文档Es6承诺

我怀疑doSome返回此值,即myObj,它也具有then方法。标准方法链接...

如果doSome作为执行doSome的对象没有返回此对象,请放心它会使用then方法返回某个对象...

正如@patrick所指出的,标准js没有then()

.then 在异步函数中返回一个Promise。

一个很好的例子是:

var doSome = new Promise(function(resolve, reject){
    resolve('I am doing something');
});

doSome.then(function(value){
    console.log(value);
});

要向其添加其他逻辑,您还可以添加reject('I am the rejected param')调用函数并console.log它。

doSome(“ task”)必须返回一个Promise对象,并且该Promise始终具有then函数。因此您的代码就是这样

promise.then(function(env) {
    // logic
}); 

而且您知道这只是对成员函数的普通调用。

另一个例子:

new Promise(function(ok) {
   ok( 
      /* myFunc1(param1, param2, ..) */
   )
}).then(function(){
     /* myFunc1 succeed */
     /* Launch something else */
     /* console.log(whateverparam1) */
     /* myFunc2(whateverparam1, otherparam, ..) */
}).then(function(){
     /* myFunc2 succeed */
     /* Launch something else */
     /* myFunc3(whatever38, ..) */
})

使用箭头功能的简略逻辑相同。

This️这可能会导致多个呼叫出现问题,请参阅注释!

这里首选使用plain的第一个代码片段的语法function

new Promise((ok) =>
   ok( 
      /* myFunc1(param1, param2, ..) */
)).then(() =>
     /* myFunc1 succeed */
     /* Launch something else */
     /* Only ONE call or statment can be made inside arrow functions */
     /* For example, using console.log here will break everything */
     /* myFunc2(whateverparam1, otherparam, ..) */
).then(() =>
     /* myFunc2 succeed */
     /* Launch something else */
     /* Only ONE call or statment can be made inside arrow functions */
     /* For example, using console.log here will break everything */
     /* myFunc3(whatever38, ..) */
)

在这种情况下,then()是method返回的对象的类doSome()方法。

“ .then()”函数是wideley,用于Windows 8 Store Apps异步编程中的承诺对象。据我了解,它的工作方式类似于回调。

在此文档中查找详细信息
http://msdn.microsoft.com/zh-cn/library/windows/apps/hh700330.aspx

当然,它也可以是任何其他已定义函数的名称。

我迟到了8年,好吧……无论如何,我真的不知道then()会做什么,但也许MDN可能有答案。实际上,我可能实际上对它有所了解。

这将向您显示所有需要的信息。除非有人已经发布了此链接。
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise/then

格式为promise.prototype.then(),promise和prototype有点像变量,而不是javascript中的变量,我的意思是像其他东西一样,例如navigator.getBattery()。then(),其中实际上存在但几乎没有在网络上使用过,如果您有兴趣,它可以显示有关设备电池的状态,更多信息以及有关MDN的更多信息。

本文地址:http://javascript.askforanswer.com/hanshuthenzaijavascriptzhongshishenmeyisi.html
文章标签:
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!