从零开始搭建react项目（三）

页面搭建关联好后，接下来就是做对接接口请求数据了。

（一）请求接口，获取数据

接口请求用的是axios，并稍微封装了下，这样才能对登录失效等一些情况做统一处理，减少代码编写。

执行：npm install axios --save 安装依赖包，然后在assets/js文件夹下新建一个request.js文件，最后引入axios进行封装，如下：

import axios from 'axios'
import qs from 'qs'

if(process.env.NODE_ENV === 'production') { //设置生产环境域名，开发环境不需要域名
	//axios.defaults.baseURL = process.env.API_ROOT;
	axios.defaults.baseURL = '自己的域名';
}
axios.defaults.withCredentials = true;	//允许携带cookie


let request = function(options) {
	if(!options.method) {
		options.method = 'post';
	}
	/*if(options.loading)
		this.$indicator.open()*/

	if(!options.header) {
		if(options.method.toLowerCase() == 'post') {
			options.header = {
				"Content-Type": "application/x-www-form-urlencoded",
			}
		}
	}
	if(!options.data)
		options.data = {}
	options.data.device = getDevice()
	options.data.qtime = new Date().getTime()/1000;
	if(window.localStorage.getItem('userInfo') && options.header['Content-Type'] != 'multipart/form-data'){
		let userinfo = JSON.parse(window.localStorage.getItem('userInfo'));
		options.data.userid = userinfo.id;
		options.data.token = userinfo.token;
	}

	if(options.method.toLowerCase() == 'get') {
		axios.get(options.url, {
			headers: options.header,
			params: options.data
		}).then(res => {
			requestOk(res, options,this)
		}).catch(error => {
			requestError(error,options,this)
		})
	} else if(options.method.toLowerCase() == 'post') {
		if(options.header['Content-Type'] != 'multipart/form-data')
			options.data = qs.stringify(options.data)
		axios.post(options.url, options.data, {
			headers: options.header
		}).then(res => {
			requestOk(res, options,this)
		}).catch(error => {
			requestError(error, options,this)
		})
	}
}

function getDevice(){
	var u = navigator.userAgent;
	var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1;
	var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
	if(isAndroid){
		return '2'
	}else if(isiOS){
	  return '1'
	}
}

function requestOk(res, options,that) {
	/*if(options.loading)
		that.$indicator.close()*/

	if(res.data.code === 1) {
		if(options.successFn && typeof options.successFn == 'function') {
			options.successFn(res.data)
		}
	} else {
		console.log(res, '+++++++++获取数据失败！！')
		if(options.failFn && typeof options.failFn == 'function') {
			options.failFn(res)
			return false
		}
		if(res.data.code === 1002) {	//登录失效
			window.localStorage.removeItem('userInfo')
		    alert('登录已失效')
		}
	}
}

function requestError(error, options,that) {
	console.log('请求超时')
	/*if(options.errorFn && typeof options.errorFn == 'function')
		options.errorFn()
	if(options.loading)
		that.$indicator.close()
	if(error.message.includes('timeout') || error.message.includes('504') || error.message === 'Network Error')
		that.$toast('请求超时，请稍后重试')*/
}

export default request

然后在index.js中引入request文件并挂载到react原型上，这样就可以直接在组建中调用this.request()方法进行接口请求了，如下：

import request from './assets/js/request'
React.Component.prototype.request = request

（二）本地测试

本地测试需要解决跨域的问题，那么就需要配置Nginx反向代理，具体就是在package.json文件中增加proxy属性，如下：

"proxy": "自己的域名",

页面调用接口：

getUsdtList(){	//获取数字货币种类
		let that = this;
		this.request({
			url: '/api/v1/currency/lists',
			data: {type: 'digital'},
			successFn(res){
				console.log(res,'获取usdt种类')
				that.setState({
					usdt: res.data
				})
				that.getUsdtData('all')
			}
		})
	}

效果：

 （三）项目打包部署

执行：npm run build 进行打包然后部署到服务器即可。

注意：布署的时候你必须把build里的文件直接放到服务器的根路径下，比如，你的服务器IP是47.96.134.256，应用服务器端口为8080，你应该保证http://47.96.134.256:8080这种访问方式，访问到的是你的build下的文件。如果你希望以http://47.96.134.256:8080/build/index.htm这种方式访问应用，那么你可以在package.json文件中增加一个homepage字段：

"homepage": ".",