2016-12-14 40 views
1

我有以下代码,因为我没有与Promises一起工作了很多,然后我试图理解,这个问题更多的是一个简单的方法来理解代码而不是一个特定的问题:了解一些Promises代码和打字稿

private getRequestDigest(siteUrl: string): Promise<string> { 
     const component: Reactwithmsgraphandsharepoint = this; 
     return new Promise<string>((resolve, reject): void => { 
      component.request(`${siteUrl}/_api/contextinfo`, 'POST').then((data: { FormDigestValue: string }): void => { 
      resolve(data.FormDigestValue); 
      }, (error: any): void => { 
      reject(error); 
      }); 
     }); 
     } 


private request<T>(url: string, method: string = 'GET', headers: any = null, data: any = null): Promise<T> { 
    return new Promise<T>((resolve, reject): void => { 
     const xhr: XMLHttpRequest = new XMLHttpRequest(); 
     xhr.onreadystatechange = function(): void { 
     if (this.readyState === 4) { 
      if (this.status === 200) { 
      resolve(this.response as T); 
      } 
      else if (this.status >= 400) { 
      reject({ 
       message: this.response['odata.error'].message.value, 
       statusText: this.statusText, 
       status: this.status 
      }); 
      } 
     } 
     }; 

     xhr.open(method, url, true); 
     if (headers === null) { 
     xhr.setRequestHeader('Accept', 'application/json;odata=nometadata'); 
     } 
     else { 
     for (var header in headers) { 
      if (headers.hasOwnProperty(header)) { 
      xhr.setRequestHeader(header, headers[header]); 
      } 
     } 
     } 
     xhr.responseType = 'json'; 
     xhr.send(data); 
    }); 
    } 
  1. 在GET请求方法,请求方法执行,但有两个参数,但是签名得到更多的,它是如何知道哪些参数?通过参数顺序吗?,它不需要所有参数传递?

  2. 什么是解析和拒绝?我知道,然后执行Web请求后执行,然后在我没有看到一个函数,我看到的数据:{FormDigestValue:字符串}):void =>这是一个语法我不明白。

  3. 什么是解析(this.response as T); ?我来自C#和泛型,看起来它可以返回任何东西?

  4. 最后,我可以把任何东西放在拒绝?

拒绝({ 消息:this.response [ 'odata.error'] message.value, 状态文本:this.statusText, 状态:this.status });

+0

1 - 参数方法,标题和数据具有默认值,所以如果您不提供它们,则使用默认值。 2 - 解决,拒绝是你用来解决或拒绝承诺的回调函数,3 - =>是一个箭头函数,4 - 解析是一个Promise概念,5 - 是的,你可以拒绝任何你喜欢的东西 –

+1

避免[ 'getRequestDigest'中的'Promise' constructor antipattern](http://stackoverflow.com/q/23803743/1048572?What-is-the-promise-construction-antipattern-and-how-to-avoid-it)! – Bergi

回答

3

您发布的代码在眼睛上很难看,而且根本不实用。这不是一个开始学习承诺的好地方。

A 非常好开始的地方是MDN(Mozilla开发者网络)。它有关于Javascript主题的出色文档,包括Promise

一些快速的答案:

  1. request方法需要2个强制参数,其余是可选的,如headers: any = null。这意味着如果headers(类型any)没有作为参数给出,它将默认为null

  2. 这两个函数都会返回一个Promise对象,该对象表示未来值或错误。 resolve(value)用于表示Promise成功成为值,reject(error)用于指示出现问题。

  3. 该代码在请求后执行,因为它调用.then(onValue, onError)对从request返回的Promise。经过处理的Promise 2个可能的情况下,该功能被作为参数:

    (data: { FormDigestValue: string }): void => { resolve(data.FormDigestValue) } 
    (error: any): void => { reject(error) } 
    

如果从request返回Promiseresolve(data)解决,此功能将依次解决其自身Promisedata.FormDigestValue

如果从requestPromise返回由reject(error) setteled,该功能将反过来拒绝了自己Promise具有相同error

getRequestDigest代码不是很好。正如您通过阅读MDN文档所学,Promise对象可以被链接。构造函数new Promise()很难使用,在这种情况下不需要。它应该阅读,而不是像(这里跳过打字稿):

return component.request(url, method) 
    .then(data => data.FormDigestValue) 

.then将产生一个新的Promise,从以前的一个(由component.request返回)衍生创建相同的结果。

我有没有提到阅读MDN这个话题?真的,很好的资源。

+0

'request'只要我可以看见** **一个**强制性参数 –