我需要在我的API上发布一些内容。 我有这个功能正常工作:
TradeContainer.js:
callApi(action){
var actionInfo = {
user_id: this.props.currentUser.id,
action: action
}
fetch('http://localhost:3000/actions', {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify(actionInfo)
})
.then(res => res.json())
.then(data => console.log(data))
}
我想将fetch()移动到另一个文件,我从那里进行所有API调用。在那个文件中,我已经有了几个获取函数(使用get方法),它们工作正常。 但是当我使用post方法将此fetch()移动到该文件时,我收到一个错误:
TypeError:无法读取未定义的属性'then'
我的代码:
TradeContainer.js:
import { saveAction } from '../components/apiCalls.js'
callApi(action){
var actionInfo = {
user_id: this.props.currentUser.id,
action: action
}
//this is fetch() function that i moved to apiCalls.js file.
//And this two lines of code throw an error.
saveAction(actionInfo)
.then(data => console.log(data))
}
apiCalls.js
export function saveAction(actionInfo){
fetch('http://localhost:3000/actions', {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify(actionInfo)
})
.then(res => res.json())
}
.then(res => res.json())返回“ok”和200。 但 saveAction(actionInfo)会返回 undefined 。怎么会?
答案 0 :(得分:2)
函数saveAction
不会返回任何内容(具体而言 - 不会返回承诺),因此您无法在该函数上使用then
:
export function saveAction(actionInfo){
fetch({
...
})
.then(res => res.json())
}
您可以返回fetch
(这是一个承诺),然后您可以在该函数上使用then
:
export function saveAction(actionInfo){
return fetch({
...
})
.then(res => res.json())
}
答案 1 :(得分:-1)
如果它对像我这样的新手有任何帮助,请确保return
和fetch
声明位于同一行,或围绕括号中的fetch
声明。
避免这个!它还会导致Cannot read property 'then' of undefined
错误。
function fetchData(){
return
fetch(url)
.then(response => response.json())
}
试试这个。
function fetchData(){
return (
fetch(url)
.then(response => response.json()))
}