如何使用 Axios 从 JSON 中获取数据?
Posted
技术标签:
【中文标题】如何使用 Axios 从 JSON 中获取数据?【英文标题】:How to get data from JSON with Axios? 【发布时间】:2018-01-17 06:09:29 【问题描述】:我正在尝试使用 Axios 在表中以 JSON 格式获取服务器端数据,但不明白如何获取每个字段,如 id
、companyInfo
等。
json :
[
"id": 1,
"companyInfo": 1,
"receiptNum": 1,
"receiptSeries": "АА",
"customerName": "Mark",
"customerSurname": "Smith",
"customerMiddleName": "Jk",
"customerPhone": "0845121",
"services": [
2,
16
]
]
axios:
store.dispatch((dispatch) =>
dispatch(type: Actions.FETCH_DATA_START)
axios.get("http://localhost:3004/paymentReceipts")
.then((response) =>
dispatch( type: Actions.RECEIVE_DATA, payload: response )
).catch((err) =>
dispatch(type: Actions.FETCH_DATA_ERROR, payload: err)
)
减速器:
export const initialState =
paymentReceipts: []
;
export default handleActions<FetchData>(
[Actions.FETCH_DATA_START]: (state, action) =>
return ;
,
[Actions.FETCH_DATA_ERROR]: (state, action) =>
return;
,
[Actions.RECEIVE_DATA]: (state, action) =>
console.log("DONE WITH STATE");
return ...state,
paymentReceipts : action.payload
, initialState)
应用程序
@connect(mapStateToProps, mapDispatchToProps)
export class App extends React.Component<App.Props, App.State>
constructor()
super();
render()
console.log("CONTAINER IS ");
console.log(this.props.receiveData);
return (
<div className=style.normal>
</div>
);
function mapStateToProps(state: RootState)
return
receiveData: state.receiveData
;
function mapDispatchToProps(dispatch)
return
;
这是我从console.log
得到的:
那么如何从 JSON 中获取这些值呢?
【问题讨论】:
【参考方案1】:如果您像我一样收到文本而不是 JSON,
使用 async/await,很简单,
let results = await axios.get("http://localhost:3004/paymentReceipts")
try
let response = JSON.parse(results.request.response)
dispatch( type: Actions.RECEIVE_DATA, payload: response )
catch(err)
dispatch(type: Actions.FETCH_DATA_ERROR, payload: err)
【讨论】:
【参考方案2】:您会将所有数据放入response.data
。
axios.get("http://localhost:3004/paymentReceipts")
.then((response) =>
dispatch( type: Actions.RECEIVE_DATA, payload: response.data ) //Change
).catch((err) =>
dispatch(type: Actions.FETCH_DATA_ERROR, payload: err)
)
【讨论】:
谢谢,它的固定情况,但我仍然不知道如何获得像id = 1, receiptSeries = АА
等配对元素
尝试打印console.log(response.data)
【参考方案3】:
要访问 json-response 中的单个属性,您只需执行以下操作:
response.data.<attribute>
例如:
axios.get("http://localhost:3004/paymentReceipts")
.then((response) =>
dispatch( type: Actions.RECEIVE_DATA, payload: response.data, id: response.data.id ) //Change
).catch((err) =>
dispatch(type: Actions.FETCH_DATA_ERROR, payload: err)
)
根据您的 json 的结构及其格式(例如对象数组),您必须对其进行迭代。
【讨论】:
data
是来自axios
库的关键字吗?
根据docs,您可以在response
上调用几个关键字。例如:response.data
、response.status
、response.headers
等。我没有足够的信心说这适用于所有环境和设置,但是是的,它是 axios response
的“关键字”以上是关于如何使用 Axios 从 JSON 中获取数据?的主要内容,如果未能解决你的问题,请参考以下文章
如何使用 nodeJS 从 axios 库中获取有效的 JSON 响应
从 Axios 响应中解析 XML,推送到 Vue 数据数组
如何使用 axios 在 Vue Js 中导入 json 数据