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;

封装接口的好处在于我们后续工程化需要的接口状态码处理以及接口的拦截处理都可以很方便的统一处理。