React使用axios請求並渲染資料

2022-09-14 06:06:11 字數 658 閱讀 7412

axios 是乙個基於 promise 的 http 庫,可以用在瀏覽器和 node.js 中

npm isntall --s**e axios

import axios from 'axios';
這裡引用 mock-api 生成的資料,結合ant design 元件庫做乙個導航列表

(1)初始化列表資料 list

constructor(props) 

}

(2)建立 menu 元件傳入生成列表 menu.item 的函式 getmenuitems()

render() 

react.fragment>)

}

這裡的 menu 為 ant design 元件庫中的導航選單元件

(3)完善函式 getmenuitems()

getmenuitems() >

menu.item>)})}

(4)通過 axios 請求資料

componentdidmount() )})}

這裡的資料由 mock-api 生成

源資料檔案:

, , , , , ]

}

執行效果:

更多 axios 使用請參考 

react 元件axios 互動請求筆記

個人建議使用npm安裝開始專案 進入到相關命令列工具中操作即可 使用npm npm i axios tip react在引進axios時所用 實際為 即反引號!好處就是不用拼接字串 遇到變數就是 就可以了。示例一 使用乙個get請求 發起乙個login請求,引數為給定的id axios.get lo...

使用axios傳送請求

axios的請求方式可以很好的結合restful風格 1.get 用於獲取資料 axios.get url then function response 2.delete 刪除資料 axios.delete url then function response 3.update更改 axios.up...

使用axios請求傳送資料

之前一直沒有用成功,今天看了一些部落格,學會了使用axios外掛程式 2.main.js import axios from axios vue.prototype.axios axios 3,元件引用 第一種 var params new urlsearchparams 注意下面的屬性必須加引號 ...