什么是Axios？

Axios是一個(gè)JavaScript庫(kù)，用于從NodeJS或?yàn)g覽器發(fā)出HTTP請(qǐng)求。 這些包括POST，GET和許多其他形式的請(qǐng)求。 它可以在原始Javascript以及許多其他框架中使用，但是我們今天的用例是React 。

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

創(chuàng)建一個(gè)React項(xiàng)目，并整理目錄！

要在React 中使用Axios，我們首先需要?jiǎng)?chuàng)建一個(gè)項(xiàng)目，利用cmd命令 create-react-app 創(chuàng)建一個(gè)react的項(xiàng)目。

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

創(chuàng)建項(xiàng)目 – create-react-app axios-with-react

啟動(dòng)服務(wù)器 – npm start

轉(zhuǎn)到瀏覽器并輸入 localhost:3000 ，

您會(huì)看到該項(xiàng)目為我們?cè)O(shè)置的項(xiàng)目。 以下是我們整理好的目錄！

安裝Axios庫(kù)

npm install axios --save

使用Axios發(fā)出請(qǐng)求

Axios處理請(qǐng)求方法，例如POST ， GET ， PUT ， DELETE ， PATCH等。我們將在項(xiàng)目中看到一些動(dòng)作。

Axios的在項(xiàng)目中的配置

首先我們創(chuàng)建一個(gè)utils文件夾，里面創(chuàng)建一個(gè)request.js 文件。代碼如下：

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

咱們的axios實(shí)例創(chuàng)建好之后，我們?cè)谙铝形募A文件中引入 Api.js：

簡(jiǎn)單的創(chuàng)建一個(gè) 函數(shù)方法 我們調(diào)用 聲明好的axios實(shí)例 req：

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

這是定義了一個(gè)動(dòng)態(tài)的 axios方法 需要傳遞三個(gè)參數(shù)，這一個(gè)函數(shù)就可以完成對(duì)數(shù)據(jù)的 增刪改查的操作！

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

之后我們?cè)?ui組件中 請(qǐng)求數(shù)據(jù)，修改，刪除，新增的時(shí)候 我么需要調(diào)用這個(gè)函數(shù)：
以下代碼是發(fā)出 get請(qǐng)求 獲取數(shù)據(jù)，我們需要在 組件生命周期里，進(jìn)入組件后 我們向服務(wù)器 發(fā)出get請(qǐng)求數(shù)據(jù)。

import { getUserList } from '../react_api/userlist'class App extends Component {constructor() {super();this.state = {list: []}}componentDidMount() {this.hqsj()}//get請(qǐng)求 獲取數(shù)據(jù)async hqsj() {const { data: msg } = await getList('resu/', 'get')console.log(msg.data);this.setState({ list: msg.data })} /* 這些代碼是有關(guān)于 刪除，修改，新增的 這是個(gè)示例//添加數(shù)據(jù)確定按鈕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()}}//刪除數(shù)據(jù)async del(id) { const { data: msg } = await getList('resu/', 'delete', { id: id })console.log(msg);if (msg.code === 200) {message.success('刪除成功！')this.hqsj()}}//提交修改請(qǐng)求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;

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。