如何使用 Axios 从 JSON 中获取数据？答案

【问题标题】：How to get data from JSON with Axios?如何使用 Axios 从 JSON 中获取数据？
【发布时间】：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 中获取这些值呢？

【问题讨论】：

标签： javascript json reactjs redux axios

【解决方案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 的“关键字”