我在一个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()?
答案 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