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;