data返回为“{}”

来源:3-10 接口 - 可选属性+只读属性

web_zhang

2020-04-27

首先是请求

axios({
  method: 'post',
  url: '/base/post',
  data: {a: 1,b: 2}
})

中间的ts配置都是按老师的写法写的,没有报错,语法也没问题,并且和老师代码进行了对照
下面是xhr.ts

export default function xhr(config: AxiosRequestConfig): AxiosPromise   {
  return new Promise((resolve, reject) => {

    const { data = null, url, method = 'get', headers, responseType } = config

    const request = new XMLHttpRequest()

    if (responseType) {
      request.responseType = responseType
    }
    
    request.open(method.toUpperCase(), url, true)

    request.onreadystatechange = function handleLoad() {
      if (request.readyState !== 4) {
        return
      }
      console.log("打印原始XMLHttpRequest",request)
      // 这里打印的request里面responseType是  ""
      // 打印的request里面response 是  "{}"
      const responseHeaders = request.getAllResponseHeaders()
 
      const responseData = responseType && responseType !== 'text' ? request.response : request.responseText
      const response: AxiosResponse = {
        data: responseData,
        status: request.status,
        statusText: request.statusText,
        headers: responseHeaders,
        config,
        request
      }
      resolve(response)

    }

    Object.keys(headers).forEach(name => {
      if (data === null && name.toLowerCase() === 'content-type') {
        delete headers[name]
      } else {
        request.setRequestHeader(name, headers[name])
      }
    })


    console.log("responseType",responseType)   // 这里是undefined,未指定的情况下应该也没错
    console.log("send(data)",data)  // 这里  {"a":1,"b":2}
    request.send(data)

  })
}

再下面是server

router.post('/base/post', function(req, res) {
  res.json(req.body)
})

最终猜测server传回去的req.body很有可能就是 {} ,但是send之前已经确保打印了,不明白为什么,本来想在server里打印下,但是可惜控制台没输出

写回答

1回答

web_zhang

提问者

2020-04-27

 发现老师在transformRequest(data: any): any 中已经将data做了JSON.stringify(data)处理,所以在header.ts中再此使用isPlainObject(data)判断时,data就不是'[object Object]'了,而变成了'[object String]',这里是不是要修改下?

1
1
web_zhang
已解决,isPlainObject(data)判断时,增加'[object String]'判断就好了
2020-04-27
共1条回复

下一代前端开发语言 TypeScript从零重构axios

课程从零开始重构功能完整的JS库,是学习造轮子的不二之选!

2631 学习 · 877 问题

查看课程