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;
已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页