如何使用 Axios 从 JSON 中获取数据?

Posted

技术标签:

【中文标题】如何使用 Axios 从 JSON 中获取数据?【英文标题】:How to get data from JSON with Axios? 【发布时间】:2018-01-17 06:09:29 【问题描述】:

我正在尝试使用 Axios 在表中以 JSON 格式获取服务器端数据,但不明白如何获取每个字段,如 idcompanyInfo 等。

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.dataresponse.statusresponse.headers 等。我没有足够的信心说这适用于所有环境和设置,但是是的,它是 axios response 的“关键字”

以上是关于如何使用 Axios 从 JSON 中获取数据?的主要内容,如果未能解决你的问题,请参考以下文章

如何使用 nodeJS 从 axios 库中获取有效的 JSON 响应

使用 axios 从 json url 获取图像

从 Axios 响应中解析 XML,推送到 Vue 数据数组

如何使用 axios 在 Vue Js 中导入 json 数据

如何在 vuejs 中使用 axios 显示获取的数据到 div

Vue.js - 如何通过 axios 响应数据从对象中获取特定字段