Javascript 如何使用 Axios 从 JSON 获取数据？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/45589208/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to get data from JSON with Axios?
提问by EnzyWeiss
I am trying to fetch server side data in JSON format in a table with Axios, but can't understand how to get every field like id, companyInfoetc.
我试图获取在与爱可信的表JSON格式进行服务器端数据，但不知道如何得到这样的每一个领域id，companyInfo等等。
json :
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})
})
reducer :
减速机：
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)
App
应用程序
@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 {
};
}
This is what I get from console.log:
这是我得到的console.log：
So how to get this values from JSON?
那么如何从 JSON 中获取这些值呢？
回答by Piyush Dhamecha
You will get all your data into response.data.
您将获得所有数据到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})
})
回答by Nocebo
To access a single attribute within your json-response you can simply do:
要访问 json-response 中的单个属性，您只需执行以下操作：
response.data.<attribute>
e.g.:
例如：
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})
})
Depending on the structure of your json and how it's formatted (e.g. array of objects) you have to iterate through it.
根据 json 的结构以及它的格式（例如对象数组），您必须遍历它。
回答by bkmalan
If you've received text instead of JSON,just like I did,
如果你收到的是文本而不是 JSON，就像我一样，
With async/await, it's simply,
使用 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})
}
