react項目中簡單封裝axios請求方法

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;

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