Невозможно прервать суперагент в приложении React

Question

Я перерабатываю некоторый код в приложении React, которое я создал, чтобы делать аякс-запросы к Tumblr api с superagent вместо jQuery.

Обратите внимание, что при использовании 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.

Однако, когда я переключаюсь на использование суперагента, вызов выполняется успешно, и я могу получить доступ к данным ответа, однако я не могу получить доступ к переменной @xhr, чтобы прервать запрос.

Мой SuperAgent Аякса вызов:

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…}

Если изменить суперагент .END использовать -> вместо => консоли. log (это) возвращает:

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

Это то, что мне нужно для вызова .abort(), чтобы прервать вызов ajax. К сожалению, мне нужно использовать жирную стрелку, чтобы иметь возможность использовать this.state при выполнении манипуляций с данными ответа.

Мой вопрос: почему @xhr возвращает undefined, когда я использую суперагент вместо jQuery, и как я могу обновить свой код, чтобы разрешить доступ к @xhr, чтобы я мог называть его .abort() при необходимости?

Answer 1

Как упоминалось в @azium, так я решил использовать self = this, а затем установить @xhr в пределах суперагента .end(). Я также реорганизовал манипуляции с данными в другую функцию 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