react05--企业级开发

1、ant design
官网地址

2、统一配置后台请求路径和方法
根目录下新建myAjax.js

import $ from 'jquery';
import {baseURL} from './config';
exprot default function(){
	return new Promise (url,method,data){
		$.ajax({
			url:baseURL + url;
			method,
			data,
			success(res){
				resove(res);
			}
			error(err){
				reject(err)
			}
		})
	}
}

根目录下创建config.js

//项目配置文件
const BaseURL = '';
export {
	baseURL
}

使用：

import myAjax form '../myAjax';

componentDidMount(){
	myAjax('','get',null).then((res)=>{
		this.setState({
			tableData : res.data
		})
	})
	.catch((error)=>{
		console.log(error);
	});
}

3、axios
纯粹的http的库
安装axios命令行 yarn add axios

import axios from 'axios'
axios({
	//配置对象
	url:'',
	method:'',
	data:{},//请求体里的参数 post方式
	params:{}//url传参 get方式
}).then((res)=>{})
.catch()

//简写方式
axios.get(url,{params:obj}).then().catch();
axios.post(url,obj).then().catch();

//拦截器
在请求发送前拦截请求，进行处理，然后再发送给后台,比如：请求头部可以添加一些信息，time:2021-1-2
响应回来之后拦截响应，处理，然后响应数据给前端

//add a request interceptor
axios.interceptors.request.use(function (config){
	//do something before request is sent
	return config;
},function (error){
	//do something with request error
	return Promise.reject(error);
});
//add a response interceptor
axios.interceptors.response.use(function(reponse){
	//do something with response data
	return response;
},function(error){
	//do something with response error
	return Promise reject(error);
});

axios.defaults.baseURL=‘https://api.example.com’;//axios提供了给请求添加baseURL的方法。设置之后，每一个axios请求的url前面都会拼上baseURL
axios.defaults.headers.common[‘Autorization’]=AUTH_TOKEN;//headers->给请求头部添加属性；common->不管是get请求还是post请求，都添加这个属性；[’’]->添加的属性名；
axios.defaults.headers.post[‘Content-Type’]=‘applications/x-www-form-urlencoded’;//给post方式添加content-type为表单处理