react使用总结三：react 数据请求使用 axios库

1.config.js配置数据请求路径和一些公共变量

// 定义常量及api接口地址
export const access_token = ''
export const platform = ''

let env = 'develop'
//开发环境、测试环境、生产环境
if(window.location.hostname == 'localhost'){
  env = 'develop'
}else if(window.location.hostname == ''){
  env = 'develop'
}else {
  env = 'product'
}

export const ENV = env

export const HOSTS = {
  develop: {
    api: 'http://www.baidu.com', // 测试环境
    domain: 'http://www.baidu.com',
  },
  product: {
    api: 'http://www.baidu.com',
    domain: 'http://www.baidu.com'
  }
}

export const ROOT = HOSTS[ENV].api

export const API = {
	memberInfo: ROOT + '/baidu.json'
}

2.api.js axios全局拦截处理及导出api

import axios from 'axios';

import { API,platform,access_token } from './config'

// 把默认配置withCredentials改为true，就可以允许跨域携带cookie信息了
axios.defaults.withCredentials = false
axios.defaults.timeout = 100000
// // axios拦截器
axios.interceptors.request.use(request => {

  if (request.params) {

    for (let key in request.params) {
      request.params[key] || (delete request.params[key])
    }
    request.params.access_token = access_token
    request.params.platform || (request.params.platform = platform)
  } else {
    
    request.params = {
      platform,
      access_token: access_token,
    }
  }
  return request
})

axios.interceptors.response.use(response => {
   // 在这里你可以判断后台返回数据携带的请求码
  if (response.data.status === 'success') {
    return response.data
  }else {
    // 非200请求抱错
    throw Error(response.data.message || '服务异常')
  }
})

//获取数据
export const fetchData = params => axios.get(API.memberInfo, {params});

3.page2.js 使用


import React, { Component } from 'react';
import {Router,Route,browserHistory} from 'react-router-dom';

import { fetchMember } from '../../api.js';

import { Button } from 'antd-mobile';

class Page1 extends Component {
	constructor(props) {
		super(props);
   	}


   	// 生命周期
	componentDidMount(){
		
	}


  	render() {
	    return (
	      <div className="page2">
	        这是page2
	        <Button type="primary" onClick={this.getData}>获取信息</Button>
	      </div>
	    );
	}


	getData(){
		fetchMember({'openId':"1"})
	  	    .then(res=>{
	  	    	if (res.status=="success") {
	  	    	  console.log(res.data)
	  		    }

	  	})
	}
}

export default Page1;

参考：https://blog.csdn.net/bbsyi/article/details/82388500

react使用总结三：react 数据请求使用 axios库

猜你喜欢