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为表单处理