无法在React app中

时间:2016-05-19 21:12:08

标签: jquery ajax reactjs coffeescript superagent

我在一个React应用程序中重构了一些代码,我建立了这个代码,用superagent代替jQuery向Tumblr api发出ajax请求。

请注意,使用coffeescript @时相当于'this'。

我对tumblr api的jQuery ajax调用如下:

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使用 - >而不是=> console.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()?

1 个答案:

答案 0 :(得分:-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