react axiosの使用パッケージasync/await

10281 ワード

以前はvueでaxios,『vue開発axiosのパッケージasync/await』を使用していた.ここでは実は以前vueにカプセル化されていたaxiosを移植したのです.ほとんど変わっていません.ここではもう言わない.
パッヶージ
//           async/await

//    axios
import axios from 'axios'

//     
// axios.defaults.baseURL = '';    
//     
// axios.defaults.baseURL = '';  
// demo  
// axios.defaults.baseURL = '';  
axios.defaults.timeout = 10000;  //       10s

var http = {

  /** get   
   * @param  {    } url
   * @param  {    } params
   */
  get: function(url,params){
    params = params || {}
    return new Promise((resolve,reject) => {
      axios.get(url,{
        params:params
      })
      .then((res) => {
        resolve( res.data);
      })
      .catch((error) => {
        reject( error );
      });
    })
  },
  /** post   
   * @param  {    } url
   * @param  {    } params
   */
  post: function(url,params){
    params = params || {};
    return new Promise((resolve,reject) => {
      axios.post(url,params)
      .then((res) => {
        resolve( res.data );
      })
      .catch((error) => {
        reject( error );
      });
    })
  }
}

export default http



使用
import React from 'react';
import { Link } from 'react-router-dom';
import http from '../assets/js/http'

class Home extends React.Component {

    //   IP
    async getMyIP(){
        let baseUrl = "https://api.apiopen.top/EmailSearch";
        let params = {
            number: '1012002'
        }
        var data = await http.get(baseUrl,params);
    }
    render() {
        return (
            <div className='home'>
                <Link to="/detail">Home</Link>
                    
            </div>
        );
    }
    componentDidMount() {
        this.getMyIP();
    }
}

export default Home;