什么是Axios？

Axios是一個JavaScript庫，用于從NodeJS或瀏覽器發出HTTP請求。 這些包括POST，GET和許多其他形式的請求。 它可以在原始Javascript以及許多其他框架中使用，但是我們今天的用例是React 。

之前與API進行通信通常是通過訪存API完成的。 Axios不會替代它，而只是使通信更容易。 它還具有更好的錯誤處理，輕松的標頭配置，并且提高了代碼的可讀性。

創建一個React項目，并整理目錄！

要在React 中使用Axios，我們首先需要創建一個項目，利用cmd命令 create-react-app 創建一個react的項目。

安裝軟件包 – npm install -g create-react-app

創建項目 – create-react-app axios-with-react

啟動服務器 – npm start

轉到瀏覽器并輸入 localhost:3000 ，

您會看到該項目為我們設置的項目。 以下是我們整理好的目錄！

安裝Axios庫

npm install axios --save

使用Axios發出請求

Axios處理請求方法，例如POST ， GET ， PUT ， DELETE ， PATCH等。我們將在項目中看到一些動作。

Axios的在項目中的配置

首先我們創建一個utils文件夾，里面創建一個request.js 文件。代碼如下：

//引入我們下載好的 Axios 庫 import axios from 'axios'//可以使用自定義配置新建一個 axios 實例 var req = axios.create({//請求路徑// `baseURL` 將自動加在 `url` 前面，除非 `url` 是一個絕對 URL。// 它可以通過設置一個 `baseURL` 便于為 axios 實例的方法傳遞相對 URLbaseURL: "http://47.106.138.99:3000",// 覆寫庫的超時默認值// 現在，在超時前，所有請求都會等待 5 秒timeout: 5000 })// 添加請求攔截器 req.interceptors.request.use((config) => {// 在發送請求之前做些什么return config; }, function (error) {// 對請求錯誤做些什么return Promise.reject(error); });// 添加響應攔截器 req.interceptors.response.use((response) => {// 對響應數據做點什么return response; }, function (error) {// 對響應錯誤做點什么return Promise.reject(error); });export default req

咱們的axios實例創建好之后，我們在下列文件夾文件中引入 Api.js：

簡單的創建一個 函數方法 我們調用 聲明好的axios實例 req：

import req from '../utils/request'export function getUserList() {return req({// `url` 是用于請求的服務器 URLurl: '/list',// `method` 是創建請求時使用的方法method: 'get', // 默認是 get//需要傳遞到服務器的 參數params:''}) }

這是定義了一個動態的 axios方法 需要傳遞三個參數，這一個函數就可以完成對數據的 增刪改查的操作！

import req from '../utils/request'export function getUserList(url,method,data) {return req({// `url` 是用于請求的服務器 URLurl: url,// `method` 是創建請求時使用的方法method: method, // 默認是 get//需要傳遞到服務器的 參數params:data}) }

之后我們在 ui組件中 請求數據，修改，刪除，新增的時候 我么需要調用這個函數：
以下代碼是發出 get請求 獲取數據，我們需要在 組件生命周期里，進入組件后 我們向服務器 發出get請求數據。

import { getUserList } from '../react_api/userlist'class App extends Component {constructor() {super();this.state = {list: []}}componentDidMount() {this.hqsj()}//get請求 獲取數據async hqsj() {const { data: msg } = await getList('resu/', 'get')console.log(msg.data);this.setState({ list: msg.data })} /* 這些代碼是有關于 刪除，修改，新增的 這是個示例//添加數據確定按鈕async hideModal() {const { data: msg } = await getList('resu/', 'post', this.state.fromList)console.log(msg);if (msg.code === 200) {message.success('添加成功')this.setState({ visible: false })this.hqsj()}}//刪除數據async del(id) { const { data: msg } = await getList('resu/', 'delete', { id: id })console.log(msg);if (msg.code === 200) {message.success('刪除成功！')this.hqsj()}}//提交修改請求async edit_ok() {const { data: msg } = await getList('resu/', 'post', this.state.edit_from)if (msg.code === 200) {message.success('修改成功！')this.state.visible1 = falsethis.hqsj()}} */render() {return (<div>{this.state.list.map((item, index) => {return <li key={index}>{item.userName}====={item.email}</li>})}</div>);} }export default App;

總結

以上是生活随笔為你收集整理的React Axios的定义，以及使用方式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。