react--axios請求數據

axios是獨立的ajax插件，不依賴於react，在VUE中甚至原生JS開發的項目中也可以用，現在已經是前端主流的ajax插件。

首先安裝axios    npm install axios --save

axios.get('/user', { params: { ID: 12345 } }) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); }); axios.post('/user', { firstName: 'Fred', lastName: 'Flintstone' }) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); });

以上是get和post請求的例子，區別是參數格式不一樣，接下來我們在項目中請求下模擬數據

新增public/mock.json, pages/AxiosTest.js

public/mock.json內容

{ "code": 200, "data": [ {"id": "1", "name": "張三", "grade": "大二"}, {"id": "2", "name": "李四", "grade": "大三"}, {"id": "3", "name": "王五", "grade": "大一"}, {"id": "4", "name": "趙六", "grade": "大二"} ] }

pages/AxiosTest.js內容

import React from 'react'; import Axios from 'axios'; export default class AxiosTest extends React.Component { constructor(props){ super(props); this.state = { data: [] } } componentWillMount(){ Axios.get('http://localhost:3000/mock.json', {}) .then(res => { if(res.data.code === 200){ this.setState({data: res.data.data}) } }) } render(){ return( <div> {this.state.data ?
                    this.state.data.map(el => { return (<p key={el.id}>{el.name} => {el.grade}</p>)
 }) : null} </div>
 ) } }

在路由配置中引入/AxiosTest.js

import React from 'react'; import {Switch, Route} from "react-router-dom"; import asyncComponent from '../lazy'; import Home2 from '../pages/Home2'; import OnePage from '../pages/OnePage'; import TwoPage from '../pages/TwoPage'; import This from '../pages/This'; import Mount from '../pages/Mount'; import HooksTest1 from '../hooks/test1'; import AxiosTest from '../pages/AxiosTest'; //import HooksUseState from '../hooks/useState';
const HooksUseState = asyncComponent(() => import ('../hooks/useState')); const Routers = ( <Switch>
        <Route path="/" exact component={Home2} />
        <Route path="/onePage" component={OnePage} />
        <Route path="/twoPage/:id" component={TwoPage} />
        <Route path="/this" component={This} />
        <Route path="/mount"  component={Mount} />
        <Route path="/hooksTest1" component={HooksTest1} />
        <Route path="/axiosTest" component={AxiosTest} />
        <Route path="/hooksUseState" component={HooksUseState} />
    </Switch>
); export default Routers

 

啟動項目之后打開瀏覽器http://localhost:3000/#/axiosTest

很簡單吧，需要注意的是react默認路徑是public文件夾，所以要把mock.json放在這里，geturl不需要public文件路徑 http://localhost:3000/mock.json

OK~  axios在項目中使用次數是相當高的，所以大部分開發人員會封裝下在實際應用中引入封裝好的axios配置就可以啦

新增axios/index.js

axios/index.js內容

/** * * ajax全局配置 * */ import axios from 'axios'; // axios 配置
axios.defaults.timeout = 5000; //響應時間
axios.defaults.headers.post['Content-Type'] = 'application/json'; //配置請求頭
axios.defaults.headers.get['Content-Type'] = 'application/json'; //配置請求頭
axios.defaults.headers.delete['Content-Type'] = 'application/json'; //配置請求頭
axios.defaults.headers.put['Content-Type'] = 'application/json'; //配置請求頭

// 當實例創建時設置默認配置
axios.defaults.baseURL = 'http://localhost:3000'; //http request 攔截器
axios.interceptors.request.use((config) => { // config.setHeaders([
    // // 在這里設置請求頭與攜帶token信息
    // ]);
    return config }, (error) => { return Promise.reject(error); }); //http response 攔截器:返回狀態判斷（添加響應攔截器）
axios.interceptors.response.use( response => { if (response.data.code === 40008) { // 40008 說明 token 驗證失敗
            // 可以直接跳轉到登錄頁面，重新登錄獲取 token
            window.location.reload();//刷新頁面，如果該頁面需要登錄，則會自動跳轉到登錄頁面
            return { code:12000, message:"登錄過時,退出請重新登錄" }; } return response.data; }, error => { return Promise.reject(error.response) // 返回接口返回的錯誤信息
 } ); export default axios;

修改AxiosTest.js

import React from 'react'; import axios from '../axios'; export default class AxiosTest extends React.Component { constructor(props){ super(props); this.state = { data: [] } } componentWillMount(){ axios.get('/mock.json', {}) .then(res => { if(res.code === 200){ this.setState({data: res.data}) } }) } render(){ return( <div> {this.state.data ?
                    this.state.data.map(el => { return (<p key={el.id}>{el.name} => {el.grade}</p>)
 }) : null} </div>
 ) } }

注意 封裝的axios返回的是response.data 所以組件里調用res內部少了一層data，一定要注意，如果沒成功頁面也沒提示請打斷點或console仔細看打印的內容~