axios笔记
-
动态获取主机地址
// host根据本机配置自行定义 window.HOST = window.location.protocol + '//' + window.location.host; // protocol > 主机协议 host > 主机host -
axios默认值
axios.defaults.baseURL = 'https://api.example.com'; axios.defaults.headers.common['Authorization'] = AUTH_TOKEN; axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'; -
axios请求头设置
axios.defaults.headers.common['X-Auth-Token'] = 'token值' //全局定义Token axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest'; //设置客户端请求为Ajax请求 axios.defaults.headers['Content-Type'] = 'application/json'; //设置请求内容类型为json格式
1. get请求
axios
.get('请求地址',{
... //请求参数
timeout:5000 //设置请求超出时间(毫秒)
})
.then(res => console.log(res)) //请求成功
.catch(err => console.error(err)) //请求失败
2. post请求
axios
.post('请求地址',{
... //请求参数
timeout:5000 //设置请求超出时间(毫秒)
})
.then(res => console.log(res)) //请求成功
.catch(err => console.error(err)) //请求失败
3. PUT/PATCH请求
-
PUT请求
axios .put('请求地址/id',{ ... //参数为需更新参数 timeout:5000 //设置请求超出时间(毫秒) }) .then(res => console.log(res)) //请求成功,返回仅更新数据 .catch(err => console.error(err)) //请求失败 -
PATCH请求
axios .patch('请求地址/id',{ ... //参数为需更新参数 timeout:5000 //设置请求超出时间(毫秒) }) .then(res => console.log(res)) //请求成功,返回全部数据 .catch(err => console.error(err)) //请求失败
4. DELETE请求
axios
.delete('请求地址/id') //删除id对应数据
.then(res => console.log(res)) //请求成功,返回为空对象
.catch(err => console.error(err)) //请求失败
5. 批量请求
axios.all([
axios.get('请求地址1',{'参数'}), //请求1
axios.post('请求地址2',{'参数'}), //请求2
])
//.then(res => console.log(res['索引']) //获取索引方法:请求成功,返回数组
.then(axios.spread(('请求1','请求2') => console.log('请求1'))) //使用axios.spread的传播方法:请求成功,返回数组
.catch(res => console.error(error)) //请求失败
6. 自定义请求头
const config = {
headers:{
"Content-Type":"application/json" // JSON数据格式
Authorization:"sometoken" //授权书
}
}
axios
.post('请求地址',{
... //请求参数
},config) //追加请求头
.then(res => console.log(res)) //请求成功
.catch(err => console.error(err)) //请求失败
7. TRANSFORMING 请求 & 响应
const options = {
method:'请求类型',
url:'请求地址',
data:{
... //请求参数
},
transformResponse:axios.defaults.transformResponse.concat(data =>{
data... //给data加工 例如:转大小写等操作
return data;
})
}
axios(options).then(res =>{console.log(res)})
8. ERROR 处理
axios
.get('请求地址', {
... //请求参数
timeout: 5000 //设置请求超出时间(毫秒)
})
.then(res => console.log(res)) //请求成功
.catch(err => { //请求失败
if (err.response) {
console.log(err.response.data)
console.log(err.response.status)
console.log(err.response.headers)
if (err.response.status == 404) { //客户端请求出现问题
console.log('客户端请求出现问题')
} else if (err.response.status == 500) { //服务端接口出现问题
console.log('服务端接口出现问题')
}
} else if (err.request) {
console.error(err.request) //请求发起,无响应问题
} else {
console.error(err.massage) //需后端配合的错误
}
})
9. 设置TOKEN
axios.defaults.headers.common['X-Auth-Token'] = 'token值' //全局定义Token
const source = axios.CancelToken.source(); //获取取消请求的对象 source为Promise对象
axios.get('请求地址', {
... //请求参数
cancelToken: source.token //
}).then(res => {
console.log(res)
}).catch(thrown => {
if (axios.isCancel(thrown)) {
console.log(thrown.message); //thrown.message的内容来自source.cancel()方法
}
})
if (true) { //设置条件取消请求
source.cancel('请求取消')
}
10. 请求拦截 & 响应拦截
-
请求拦截
axios.interceptors.request.use(config => { console.log(config); //加工数据 如:追加时间/大小写转换等 return config; //返回加工数据 }, err => { console.log(err); }) -
响应拦截
instance.interceptors.response.use(res => {
console.log(res);
return res.data;
}, err => {
console.log(err);
}
)
12. AXIOS 实例化
const axiosInstance = axios.create({
baseURL:"代理地址",
timeout: 5000 //毫秒为单位
... //更多参数
})
axiosInstance.get/post(...) //直接调用
