react框架沒有自己的http模組，所以我們通常使用第三方模組來實現介面請求，在這裡我是使用axios來實現。

我們可以自己封裝下axios請求，這樣的話我們在使用介面時會更加的方便和統一管理。

1. 首先我們先下載axios依賴包：

npm i --save axios

2. 接著我們新建一個axios.js檔案用來封裝我們的請求方法：

axios.js

import axios from 'axios';

// get請求
export function getRequest(url,sendData){
    return new Promise((resolve,reject)=>{
        axios.get(url,{params:sendData}).then(res
 
=>{
            resolve(res.data);    
      }).catch(error=>{
            reject(error);    
      })                 
    })
}

// post請求
export function postRequest(url,sendData){
    return new Promise((resolve,reject)=>{
        axios.post(url,sendData).then(res=>{
            resolve(res.data);    
      }).
 
catch(error=>{
            reject(error);    
      })                 
    })
}

3. 接下來我們在頁面中就可以用我們封裝好的方法來請求介面啦！

home.js

import React, {Component} from 'react';

// 引入axios.js中封裝的方法
import {getRequest,postRequest} from './public/axios/axios.js';

class home extends Component {
  request(){
      getRequest(
 
'xxx/xxx',{}).then(res=>{
          console.log(res); // 列印請求到的資料
    }).catch(error=>{
          console.log(res);  // 列印介面報錯
    })    
  }  

  render(){
      return (
          <Button type="primary" onClick="request()">點選請求介面<Button>    
      )  
  }    
}

export default home;

封裝介面的好處在於我們後續工程化需要的介面狀態碼處理以及介面的攔截處理都可以很方便的統一處理。