1.传入配置参数
单次请求
const config = {
headers:{
header1: value1,
header2: value2
}
};
const url = "api endpoint";
const data ={
name: "Jake Taper",
email: "taperjake@gmail.com"
}
//GET
axios.get(url, config)
.then(res=> console.log(res))
.catch(err=> console.log(err))
//POST
axios.post(url, data, config)
.then(res => console.log(res))
.catch(err => console.log(err))
多次请求
//给所有请求添加请求头
axios.defaults.headers.common['Authorization'] = `Bearer ${localStorage.getItem('access_token')}`;
//给所有POST请求添加请求头
axios.defaults.headers.post['Authorization'] = `Bearer ${localStorage.getItem('access_token')}`;
2.创建axios实例
let reqInstance = axios.create({
headers: {
Authorization : `Bearer ${localStorage.getItem(‘access_token’)}`
}
}
})
reqInstance.get(url);
3.使用axios拦截器
axios.interceptors.request.use(
config => {
config.headers['Authorization'] = `Bearer ${localStorage.getItem('access_token')}`;
return config;
},
error => {
return Promise.reject(error);
}
);
使用拦截器的另一个好处是可以设置token过期时自动刷新token：
const refreshToken= ()=>{
// gets new access token
}
// 403请求时自动刷新access token
axios.interceptors.response.use(
response => {
return response;
},
error => {
if(error.response.status == 403){
refreshToken()
}
}
);
Using Axios to set request headers - LogRocket Blog
