react axios的使用 封裝async/await

之前在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;