React-Axios基本使用
Axios 安装
-
进入之前创建的脚手架app中执行以下两个命令中的其中一个
1 2
$ npm install react-axios $ yarn add axios
Axios Get请求
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//为给定 ID 的 User 创建请求
axios.get(
'url',
paras:{
para1: value1,
...
}
).then((res) => {
//成功后执行此处代码块
console.log(res);
}).catch((err) => {
//失败则执行此处代码块
console.log(err);
});
//也可以直接用?para1=value将其接在url后面
Axios Post请求
1
2
3
4
5
6
7
8
9
10
11
12
axios.post(
'url',
{
params1: value1,
params2: value2
}).then((res) => {
console.log(res);
}).catch((err) => {
console.log(err);
});
)
Axios 执行多个并发请求
1
2
3
4
5
6
7
8
9
getData1 = ()=> axios.get('url/file1');
getData2 = ()=> axios.get('url/file2');
axios.all([
getData1(),
getData2()
]).then(axios.spread((data1, data2) => {
//可以同时取到两个数据
console.log(data1, data2);
}))
跨域问题
域名、端口有一个不一致就会导致跨域
-
方法一：在package.json中追加数据
1
poxy:"代理点的地址及端口"
-
方法二：新建一个setProxy.js文件
1 2 3 4 5 6 7 8 9 10 11 12 13
const proxy = require('http-proxy-middleware') //假如要请求的地址是: 192.168.1.100 module.exports = function (app) { app.use( proxy('/api', { //也就是你在React中本地请求时，使用了"/api前缀"，自动将代理设置为target中的地址 target: 'http:192.168.1.100:5000'，//转发的地址，也就是找的代理地址 changeOrigin: true, //如果设置为true：发送请求头中host会设置成target pathRewrite: { '^/api1': '' }//重写请求路径，不写的话，在代理处发送的请求就是:192.168.1.100:5000/api1/...,写了之后就是:192.168.1.100:5000/... }) ) }
ps:更改配置文件后要重启服务
Axios 拦截器（封装axios）
简单封装
创建axios实例
1
2
3
4
5
6
7
8
9
import axios form 'axios'
//取消请求token
let source = axios.CancelToken.source();
const interceptor = axios.create(
baseURL: '请求的地址',
timeout: 15000 //超时时间
)
请求拦截器
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
//处理get请求的链接拼接
const processGetParams = (config) => {
// console.log('config', config)
let url = config.url
// get参数编码
if (config.method === 'get' && config.params) {
url += '?'
let keys = Object.keys(config.params)
for (let key of keys) {
url += `${key}=${encodeURIComponent(config.params[key])}&`
}
url = url.substring(0, url.length - 1)
config.params = {}
}
config.url = url
return config;
}
//拦截请求
const handleRequest = (config) => {
//...一些处理
return processGetParams(config)
}
//拦截错误请求
const handleRequestError = (error) => {
return Promise.reject(error);
}
interceptor.interceptors.request.use(handleRequest, handleRequestError);
响应拦截器
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
//处理异常响应时的数据
const handleReponse = (error) => {
if (error instanceof Error) {
if (error.toString().toLowerCase().includes("network")) {
// alert(" 网络连接失败！");
message.error('网络连接失败！');
return Promise.reject(error);
}
}
//当是取消请求是，会直接调用错误回调
if (error && error.__proto__.__CANCEL__) {
return Promise.reject(error);
}
alert('服务器出错，请稍后再试！！！');
return Promise.reject(error);
}
//处理正常响应时返回的数据
const handleReponse = (response) => {
let { data } = response;
//token过期会响应200，且msgCode===-2
if (data.msgCode === -2) {
//没有登陆，为了防止多个弹框，取消当前全部的请求
source.cancel();
source = axios.CancelToken.source();
alert('登录过期，请重新登录');
} else if (data.msgCode !== 0) {
//全局错误提示错误
//根据不同错误处理不同的情况
alert(data.msg);
}
//正常请求及data.msgCode===0
return data;
}
interceptor.interceptors.response.use(handleReponse, handleReponseError);
发送请求
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
//post请求
const post = (url, data, config) => {
return instance.post(url, qs.stringify(data), {
...config,
cancelToken: source.token
});
};
//json主体post请求
const postJSON = (url, data, config) => {
return instance.post(url, data, {
...config,
cancelToken: source.token
});
};
//put请求
const put = (url, data, config) => {
return instance.put(url, data, {
...config,
cancelToken: source.token
});
};
//get请求
const get = (url, params, config) => {
return instance.get(url, {
...config,
cancelToken: source.token,
params
});
};
//删除请求
const del = (url, params, config) => {
return instance.delete(url, {
...config,
cancelToken: source.token,
params
});
};
抛出请求方法
1
export { post, postJSON, put, get, del };
二次封装
一般情况下，会根据项目需求，将某一个方法再次封装成更加贴近项目需求的格式，或者说更加方便开发的接口。