1. xhr发送Ajax请求
2. 使用axios
因为react中不直接操作DOM,故不适合使用JQuery,且JQuery库比较大,且请求结果为回调函数形式返回,容易形成毁掉地狱,故推荐使用轻量级且返回结果为promise对象的axios。
2.1 安装axios
使用yarn或者npm命令安装axios
yarn add axios
npm i axios
2.2 发送axios请求
axios请求返回promise对象,可通过then方法获取请求结果,catch方法捕获异常。
2.2.1 axios常见请求发送方式
axios({
method:"POST", // 若不设置,默认为GET请求
url:'/user/12345',
//当`url`是相对地址的时候,设置`baseURL`自动添加在url之前会非常方便
baseURL:'https://some-domain.com/api/',
//`headers`选项是需要被发送的自定义请求头信息
headers: {'X-Requested-With':'XMLHttpRequest'},
//`params`选项是要随请求一起发送的请求参数----一般链接在URL后面
//他的类型必须是一个纯对象或者是URLSearchParams对象
params: {
ID:12345
},
//`data`选项是作为一个请求体而需要被发送的数据
//该选项只适用于方法:`put/post/patch`
data:{
firstName:"Fred",
lastName:"Flintstone"
},
//`timeout`选项定义了请求发出的延迟毫秒数
//如果请求花费的时间超过延迟的时间,那么请求会被终止
timeout:1000,
//`withCredentails`选项表明了是否是跨域请求,默认是false
withCredentials:false,//default,
//返回数据的格式
//其可选项是arraybuffer,blob,document,json,text,stream
responseType:'json',//default
});
不同请求方式别名简写,可不用设置method
axios.request(config);
axios.get(url[,config]);
axios.delete(url[,config]);
axios.head(url[,config]);
axios.post(url[,data[,config]]);
axios.put(url[,data[,config]])
axios.patch(url[,data[,config]])
(1) GET请求
//请求携带数据直接写在url后面
axios.get('/user?ID=12345')
.then(function(response){
console.log(response.data);
})
.catch(function(err){
console.log(err);
});
//请求携带数据写在第二个参数的params属性中
axios.get('/user',{
params:{
ID:12345
}
})
.then(function(response){
console.log(response.data);
})
.catch(function(err){
console.log(err);
});
(2) Post请求
axios.post('/user',{
firstName:'Fred',
lastName:'Flintstone'
})
.then(function(res){
console.log(res.data);
})
.catch(function(err){
console.log(err);
});
(3) 一次性并发多个请求
function getUserAccount(){
return axios.get('/user/12345');
}
function getUserPermissions(){
return axios.get('/user/12345/permissions');
}
axios.all([getUserAccount(),getUserPermissions()])
.then(axios.spread(function(acct,perms){
//当这两个请求都完成的时候会触发这个函数,两个参数分别代表返回的结果
}))
2.2.2 请求返回的内容
{
data:{},
status:200,
//从服务器返回的http状态文本
statusText:'OK',
//响应头信息
headers: {},
//`config`是在请求的时候的一些配置信息
config: {}
}
2.2.3 拦截器
//添加一个请求拦截器
axios.interceptors.request.use(function(config){
//在请求发出之前进行一些操作,例如修改配置
return config;
},function(err){
//Do something with request error
return Promise.reject(error);
});
//添加一个响应拦截器
axios.interceptors.response.use(function(res){
//在这里对返回的数据进行处理
return res;
},function(err){
//Do something with response error
return Promise.reject(error);
})
// 取消拦截器
var myInterceptor = axios.interceptor.request.use(function(){/*....*/});
axios.interceptors.request.eject(myInterceptor);
2.2.4 处理错误
axios.get('/user/12345')
.then(res => {},err => {})
.catch(function(error){
if(error.response){
//请求已经发出,但是服务器响应返回的状态吗不在2xx的范围内,可根据不同错误码进行错误处理
console.log(error.response.data);
console.log(error.response.status);
console.log(error.response.header);
}else {
//一些错误是在设置请求的时候触发
console.log('Error',error.message);
}
console.log(error.config);
});
2.2.5 案例
2.3 解决跨域问题
使用代理服务器解决跨域问题,原理如下
配置代理有两种方式:
(1) 在package.json中添加代理配置,并在发送请求处将请求路径的协议、域名、端口改为和当前客户端一致,并重启项目。
(2) 在项目src下配置setupProxy.js配置文件(不可修改文件名称),配置具体的代理规则(语法规则为common.js)。
3. fetch发送请求
优化1:
优化2: