vanilla JS函数中的回调并不总是工作？

Question

我写了一个小的vanilla JS函数来利用XMLHttpRequest对象。我有一个回调返回，但由于某些原因，我只能让回调工作在 onreadystatechange 功能，我需要它在我的 ontimeout 和 onerror...

我的函数。

function makeHttpRequest (type, url, timeout, callback) {
  const xhr = new XMLHttpRequest()

  xhr.open(type, url, true)
  xhr.timeout = timeout
  xhr.ontimeout = () => {
    callback.apply('timeout error')
  }

  xhr.onreadystatechange = () => {
    if (xhr.readyState === 4 && xhr.response != null) {
      callback.apply(xhr)
    }
  }

  xhr.onerror = () => {
    callback.apply('generic error')
  }

  xhr.send()
}

我是如何使用这个函数的：

makeHttpRequest('GET', url, timeout, function() {
  const res = this.response != '' ? this.response : JSON.stringify({})
  // ...
})

this.response 在超时和出错时不包含任何东西。

Answer 1

该 apply 方法设置一个函数的 this 参数为其第一个参数。当出现超时或错误时，你就会像这样调用apply。

callback.apply('timeout error');

因此， this 值是一个字符串。如果你在 javascript字符串的文档你会发现，一个 String 对象没有 .response 财产。这就是为什么 'timeout error'.response 不包含任何东西（它是 undefined).

如果你想 this.response 包含错误信息，那么就不要传递一个字符串作为 this. 而不是将其传递为 .response:

let error = {
    response: 'timeout error'
}

callback.apply(error)

或者更简单地说：

callback.apply({ response: 'timeout error' })