axios 使用2--全局配置、拦截器、取消请求、断点续传
1、基本使用
axios.method('url',[data],options)
.then((res)=>{...})
.catch((err)=>{...})
eg:
sendAjax(){
// 让组件具备axios对象
// axios.get||post|put|delete(url,options)
axios.get('../axios/data/list.json')
.then((res)=>{
console.log(res)
})
.catch((err)=>{
console.log('数据获取失败')
})
}
2、合并请求
axios.all([请求1，请求2])
eg:
Vue.prototype.$axios = axios;
sendAjax(){
//请求1get 请求2post
// this.$axios.get||post(url,[post的时候有data],options)
// 配置公共数据（defaults其实就是配置中的options,一个是公共配置，一个是单个配置）
this.$axios.defaults.baseURL = '../axios/data/';
let q1 = this.$axios.get('list.json');
let q2 = this.$axios.post('list2.json','a=1');
// 合并这两个请求，并处理其成功和失败
// 箭头函数会自动向上层借this
this.$axios.all([q1,q2])
.then(this.$axios.spread((res1,res2)=>{
//全成功
this.res1 = res1;
this.res2 = res2;
}))
.catch((err)=>{
// 有一个失败就失败了
console.log(err)
})
}
3、options配置（全局）
options（部分，没有包含全部）
baseURL:基础URL路径params查询字符串（对象）transformRequest:function(post请求传递的数据){}转换请求体数据transformResponse:function(res){自己转换相应回来的数据}转换响应体数据headers请求头信息data请求体数据timeout请求超时，请求多久以后没有响应算是超时（毫秒）withCredentials:false默认false，表示跨域请求时是否需要使用凭证onUploadProgress上传
使用示例
// 配置公共数据（defaults其实就是配置中的options,一个是公共配置，一个是单个配置）
axios.defaults.baseURL = '../axios/data/';
// this.$axios.defaults.headers = {}//会覆盖原有默认头
axios.defaults.headers.accept = 'abc';//默认头修改个别的
4、拦截器
use给请求之前做的事可以是多件，可以use多次
- 请求拦截器：在发起请求之前，做的事 加上请求头—cookie
axios.interceptors.request.use((config)=>{});
- 响应拦截器：在响应回来以后，做的事 存储服务区的请求头—set-cookie
axios.interceptors.response.use((res)=>{});
完整demo示例(vue)
demo实现的功能
需求1(下面的isShow)
1、在请求发起之前，show一个loading 出来
2、响应回来之后，关闭这个loading
需求2：实现一个类似cookie的机制（可以用于登录）
服务器 ->
set-cookie:xxx 保存起来在响应拦截器中完成
在请求之前，从本地获取xxx 设置拦截器，请求头
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>拦截器</title>
<style>
.loading{
width: 80px;
height: 80px;
border-radius: 50%;
margin: 0 auto;
margin-top:100px;
position: relative;
border:5px solid lightgreen;
-webkit-animation: turn 2s linear infinite;
}
.loading span{
display: inline-block;
width: 30px;
height: 30px;
border-radius: 50%;
background: lightgreen;
position: absolute;
left: 50%;
margin-top: -15px;
margin-left: -15px;
-webkit-animation: changeBgColor 2s linear infinite;
}
@-webkit-keyframes changeBgColor{
0%{
background: lightgreen;
}
100%{
background: lightblue;
}
}
@-webkit-keyframes turn{
0%{
-webkit-transform: rotate(0deg);
border-color: lightgreen;
}
100%{
-webkit-transform: rotate(360deg);
border-color: lightblue;
}
}
</style>
</head>
<body>
<div id='app'></div>
<script src='vue.js'></script>
<script src='axios.js'></script>
<script>
let App = {
template:`
{{res1}}
`,
data(){
return{
res1:'',
ishow:false
}
},
created() {
},
methods: {
sendAjax(){
// 配置拦截器
// use给请求之前做的事可以是多件，可以use多次
//请求拦截器
this.$axios.interceptors.request.use((config)=>{
console.log(config);
// 设置请求头，类似cookie
let token = localStorage.getItem('token');
if(token){
config.headers['token'] = token;
}
this.isShow = true;
return config;
});
//响应拦截器
this.$axios.interceptors.response.use((res)=>{
console.log(res);
// 获取服务器返回的响应头
//（该例子无服务器返回，可直接用localStorage.setItem('token','12344667');进行测试）
if(res.data.token){ // 假设token在data中
let token = res.data.token;
localStorage.setItem('token',token);
}
this.isShow = false;
return res;
});
this.$axios.defaults.baseURL = '../axios/data/';
this.$axios.post('list2.json')
.then(res=>{
console.log('响应回来了',res);
})
}
},
}
// 组件内的每一个this对象，都是vue的孩子
// Vue祖宗的原型数据，就会共享给所有的孩子
Vue.prototype.$axios = axios;
new Vue({
el:'#app',
components:{
app:App
},
template:`5、取消请求
API3取消步骤
（1）发送请求前
const CancelToken = axios.CancelToken;
const source = CancelToken.source(); //创建标识请求的源对象
（2）保存起来方便取消调用
this.source = source; // 将对象存储到组件
// post 内部
CancelToken:source.token, // 请求的option对象
（3）取消请求
this.source.cancel(); // 取消到之前的那个请求
断点续传
前端的断点续传，及时获取当前上传文件的大小，存储起来
let file = <input type='file/>.file[0].slice(文件开始部分，文件结尾部分)
new FormData().append('file',file);
后台处理：接受多次文件，都往那个文件上追加
完整demo示例(vue)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id='app'></div>
<script src='../node_modules/vue/dist/vue.js'></script>
<script src='axios.js'></script>
<script>
let App = {
template:`
上传进度：{{rate}}%
选择文件：
`,
data(){
return{
res1:'',
res2:'',
file:{},
rate:0,
loaded:0,
source:{}
}
},
created() {
// 公共 上传
this.$axios.defaults.onUploadProgress = (progressEvent)=>{
// 保存最后上传大小
this.loaded = progressEvent.loaded;
console.log(progressEvent.loaded);
console.log(progressEvent.total);
this.rate = (progressEvent.loaded/progressEvent.total)*100
}
},
methods: {
//续传
resume(){
// 剪裁文件 this.file.size总文件大小
let fileData = this.file.slice(this.loaded+1,this.file.size)
let fd =new FormData();
fd.append('file',fileData);
// 为了续传以后再取消
const CancelToken = axios.CancelToken;
const source = CancelToken.source();
this.source = source;
this.$axios.post('list2.json',fd,{
//携带取消标识
CancelToken:source.token
})
.then(res=>{
console.log(res)
})
.catch(err=>{
console.log(err)
})
},
// 取消请求---取消有问题
cancel(){
this.source.cancel(); //
},
sendAjax(){
const CancelToken = axios.CancelToken;
const source = CancelToken.source(); //创建标识请求的源对象
// 保存起来方便取消调用
this.source = source; // 将对象存储到组件
let fd =new FormData();
fd.append('file',this.file);
this.$axios.defaults.baseURL = '../axios/data/';
this.$axios.post('list2.json',fd,{
//携带取消标识
CancelToken:source.token // 请求的option对象
})
.then(res=>{
console.log(res)
})
.catch(err=>{
console.log(err)
})
},
changeFile(e){
console.log(e.target.files[0])
this.file = e.target.files[0]
}
},
}
// 组件内的每一个this对象，都是vue的孩子
// Vue祖宗的原型数据，就会共享给所有的孩子
Vue.prototype.$axios = axios;
new Vue({
el:'#app',
components:{
app:App
},
template:`