無法放棄React應用程序中的superagent

我正在構建一個React應用程序中的一些代碼，以構建與superagent而不是jQuery的tumblr api的ajax請求。無法放棄React應用程序中的superagent

請注意，使用coffeescript @時相當於'this'。

我的jQuery的AJAX調用tumblr API如下：

App = React.createClass 

    loadPhotos: -> 

    data = 
     api_key: 'xxx' 

    blog = 'tumblrname' 
    url = "http://api.tumblr.com/v2/blog/#{blog}.tumblr.com/posts/photo" 


    @xhr = $.ajax 
     url: url 
     type: 'GET' 
     dataType: 'jsonp' 
     data: data 
     success: (data) => 

     console.log @xhr, @

此控制檯輸出爲：

Object {readyState: 4, responseJSON: Object, status: 200, statusText: "load"} Constructor {props: Object, context: Object, refs: Object, updater: Object, state: Object…}

一切正常，當我使用jQuery和我能夠調用@ xhr.abort（）來中止ajax調用。

但是，當我切換到使用superagent調用成功，我可以訪問響應數據，但我不能訪問@xhr變量來中止請求。

我SuperAgent的Ajax調用：

superagent = require 'superagent' 
jsonp = require 'superagent-jsonp' 

App = React.createClass 

    loadPhotos: -> 

    data = 
     api_key: 'xxx' 

    blog = 'tumblrname' 
    url = "http://api.tumblr.com/v2/blog/#{blog}.tumblr.com/posts/photo" 


    @xhr = superagent 
     .get url 
     .use jsonp 
     .query data 
     .end (err, res) => 

     console.log @xhr, @

此代碼的控制檯輸出爲：

undefined Constructor {props: Object, context: Object, refs: Object, updater: Object, state: Object…}

如果我改變的SuperAgent .END使用 - >而不是=>控制檯。 log（this）返回：

Request {_query: Array[2], method: "GET", url: "http://api.tumblr.com/v2/tagged", header: Object, _header: Object…}

這是我需要調用.abort（）來中止ajax調用。不幸的是，我需要使用胖箭頭才能在響應數據上執行操作時使用this.state。

我的問題是：爲什麼@xhr在使用superagent而不是jQuery時返回undefined，以及如何更新我的代碼以允許訪問@xhr，以便根據需要調用.abort（）？

來源

2016-05-19 satyrsynth

怎麼樣'自我= this' ..忘了，如果你不能這樣做，在CS出於某種原因 – azium

我不知道我理解你所建議？沒有理由設定自己=這是我能想到的，胖箭頭已經爲我做了。我需要訪問this.xhr變量以及superagent響應函數中的this.state變量。我有權訪問this.state，因爲胖箭頭而不是this.xhr。 – satyrsynth

在方法的某個地方寫'self = this'，這樣你就可以訪問'self.state'，然後在'end'中使用細箭頭來訪問'this.abort' – azium

-1

作爲@azium提到的，我解決這個問題的方式是使用self = this，然後在超合適.end()函數內設置@xhr。我還將數據操作重構爲另一個函數processResponse()。工作代碼如下：

superagent = require 'superagent' 
jsonp = require 'superagent-jsonp' 

App = React.createClass 

    loadPhotos: -> 

    self = @ 

    data = 
     api_key: 'xxx' 

    blog = 'tumblrname' 
    url = "http://api.tumblr.com/v2/blog/#{blog}.tumblr.com/posts/photo" 

    req = superagent 
     .get url 
     .use jsonp 
     .query data 
     .end (err, res) -> 

     self.xhr = @ 

     self.processResponse(res.body) 

    processResponse: (data) -> 
    # do the stuff to the response data with @state

來源

2016-05-19 21:44:28 satyrsynth

無法放棄React應用程序中的superagent

回答

相關問題