vue-axios
Axios是一个基于promise的HTTP库
并对响应回来的内容自动转换成 JSON类型的数据
浏览器支持情况:Chrome、Firefox、Safari、Opera、Edge、IE8+
引入
API
- axios(config)
- axios(url, [config])
config 配置对象
- 常用配置对象
axios({
method:"get",// post、get、put....
url:"/".//请求的路径
baseurl:"/",//请求的域名 基本路径
params: {}, // 会将请求参数拼接在url上
data: {}, // 会将请求参数放在请求体中
headers: {}, // 设置请求头,例如设置token等
timeout: 1000, // 设置请求超时时长,单位:ms
})
例1
//当我们执行handleShow方法就会发送axios请求
handleShow(){
axios({
method:'get',//发送get请求
url:'https://developer.duyiedu.com/vue/getUserInfo',
})
}
//也可以这样写
handleShow(){
axios({
method:'get',//发送get请求
url:'/vue/getUserInfo',
baseURL:'https://developer.duyiedu.com'
//它会把baseURL和url拼接在一起之后发送
})
}
当我们请求数据时
handleShow(){
axios({
method:'get',//发送get请求
url:'https://developer.duyiedu.com/vue/getUserInfo',
}).then(res=>{
this.msg = res.data.msg
this.personList = res.data.data
console.log(res);
})
}
也可以写成两个参数的情况
handleShow(){
axios('/getUserInfo',{
//第一参数设置为url的值
method:'get',//发送get请求
baseURL:'https://developer.duyiedu.com/vue',
}).then(res=>{
this.msg = res.data.msg
this.personList = res.data.data
console.log(res);
})
}
方法别名 ,为了方便起见,给所有请求的方法提供了别名
- 参数中有【】表示可选的 没有的【】是必须选择
API
- axios.request(config)
- axios.get(url, [config])
- axios.post(url, [data], [config]])
- axios.delete(url, [config])
- axios.head(url, [config])
- axios.put(url, [data], [config])
- axios.patch(url, [data], [config]])
- axios.options(url, [config])
例
handleUpload(){
const { name, mail} = this;
axios.post('/setUserInfo',{name,mail},{
baseURL:'https://developer.duyiedu.com/vue',
}).then(res=>{
console.log(res);
})
},
//当我们执行这儿方法时 会发送一个数据
配置默认值
方法别名
为方便起见,为所有支持的请求方法提供了别名。
- axios.request(config)
- axios.get(url, [config])
- axios.post(url, [data], [config]])
- axios.delete(url, [config])
- axios.head(url, [config])
- axios.put(url, [data], [config])
- axios.patch(url, [data], [config]])
- axios.options(url, [config])
配置默认值
可以指定将被用在各个请求的配置默认值
全局配置
axios.defaults.baseURL = ‘https://developer.duyiedu.com/vue’;
axios.defaults.timeout = 1000;
在实际项目中,很少用全局配置。
axios.defaults.baseURL = 'https://developer.duyiedu.com/vue';
axios.defaults.timeout = 1000;
handleUpload(){
const { name, mail} = this;
axios.post('/setUserInfo',{name,mail},{
//baseURL:'https://developer.duyiedu.com/vue',
//因为全局配置了baseURL所以这里不用配置了,也可以发送
}).then(res=>{
console.log(res);
})
},
//当我们执行这里的方法时 会发送一个数据
实例配置
可以使用自定义配置新建一个axios实例
const instance = axios.create({
baseURL:"",
timeout:""
})
instance.post('/setLURL').then(res=>{
//-----
})
请求配置
const instance = axios.create();
instance.get('/dd',{
tiemout100})
配置的优先顺序
如果全局 和实例和自己请求时 同时设置了baseURL:那么会发送的是自己请求的baseURL,
如果同时配置了全局 实例 和请求 那么优先级是这样的
全局 < 实例 < 请求
并发
同时进行多个请求,并统一处理返回值
- axios.all(iterable)
- axios.spread(callback)
axios.all([
axios.get('/a'),
axios.get('/b')
]).then(axios.spread(aRes,bRes)=>{
consoloe.log(aRes,Bres)
})
拦截器
interceptors,在发起请求之前做一些处理,或者在响应回来之后做一些处理。
请求拦截器
axios.interceptors.request.use(config => {
// 在发送请求之前做些什么
return config;//config为配置的值拦截器执行后需要把配置后的信息返回
})
例
<script>
axios.defaults.baseURL = "https://developer.duyiedu.com/vue";
axios.interceptors.request.use((config) => {
console.log(config);
return config;
});
const vm = new Vue({
el: "#app",
data: {
name: "",
mail: "",
msg: "",
personList: [],
},
methods: {
handleUpload() {},
handleShow(){
axios.get('/getUserInfo').then(res=>{
console.log(res);
}
)
}
},
});
</script>
响应拦截器
axios.interceptors.response.use(response => {
// 对响应数据做点什么
return response;
})
也可以为配置的实例添加拦截器
const instance = axios.create();
instance.interceptors.request.use();
移除拦截器
- 当我们移除拦截器了 那么就不执行拦截器了
const myInterceptor = axios.interceptors.request.use(config => {});
axios.interceptors.request.eject(myInterceptor);
取消请求
用于取消正在进行的http请求:想取消谁的请求 就用到谁的身上
const source = axios.CancelToken.source();
const source = axios.CancelToken.source();
methods: {
handleShow(){
axios.get('/getUserInfo',{
cancelToken:source.token
// 取消请求
}).then(res=>{
console.log(res);
}
)
},
handleCancelGet(){
source.cancel();
}
},
methods: {
handleShow() {
axios
.get("/getUserInfo", {
cancelToken: source.token,
})
.then((res) => {
console.log(res);
}).catch(error=>{
console.log(error);
//error的值和设置的 source.cancel('取消请求了');值相关
// source.cancel()里面设置了什么 error就是什么 如果没有设置 就是undefined
// source.cancel()里面设置了什么 error就是什么 如果没有设置 就是undefined
const msg = error.messge;
if(msg===0){
//;;;;
}else if(msg===1){
//'''':可以根据msg的值 做一些其他的处理
});
},
handleCancelGet() {
source.cancel('取消请求了');
//
},
错误处理
在请求错误时进行的处理
error 是一个对象 request / response 是error的上下文,标志着请求发送 / 得到响应
在错误中,如果响应有值,则说明是响应时出现了错误。
如果响应没值,则说明是请求时出现了错误。
在错误中,如果请求无值,则说明是请求未发送出去,如取消请求。
axios.defaults.baseURL = "https://developer.duyiedu.com/vue";
axios.interceptors.request.use(
(config) => {
// console.log(config);
return config;
},
// 我们通常在拦截器中处理错误,第2个参数为设置的error信息
(error) => {
//在request拦截器中 error的值是取消请求的值 我们通常把其他error放在reponse拦截器里使用
return Promise.reject(error); //必须返回才可以
}
);
axios.interceptors.response.use(
(config) => {
console.log(config);
return config;
},
(error) => {
// 只有在response里才能获得error.response和error.request信息
if (error.response) {
const { status } = error.response;
switch (status) {
case 404:
alert("url错误");
break;
case 401: {
alert("iii");
}
}
console.log(error.response);
} else if (error.request) {
console.log(error.request);
}
// 不会走到这里 请求未发出会在source.cancel("取消请求了");中单独处理
// else {
// console.log("请求未发出");
// }
return Promise.reject(error); //必须返回才可以
}
);
axios.get(’/user/12345’)
.catch(function (error) {
// 错误可能是请求错误,也可能是响应错误
if (error.response) {
// 响应错误
} else if (error.request) {
// 请求错误
} else {
console.log(‘Error’, error.message);
//请求未发出
}
console.log(error.config);
});
在实际开发过程中,一般在拦截器中统一添加错误处理
请求拦截器中的错误,会当请求未成功发出时执行,但是要注意的是:取消请求后,请求拦截器的错误函数也不会执行,因为取消请求不会抛出异常,axios对其进行了单独的处理。
在更多的情况下,我们会在响应拦截器中处理错误。
axios 预检
当axios的请求为非简单请求时,浏览器会进行预检,及发送OPTIONS请求。请求到服务器,询问是否允许跨域。如果响应中允许预检中请求的跨域行为,则浏览器会进行真正的请求。否则会报405错误。
- 简单请求只要同时满足两个条件就是简单请求
(1) 请求方法是以下三种方法之一:
HEAD
GET
POST
(2)HTTP的头信息不超出以下几种字段:
Accept
Accept-Language
Content-Language
Last-Event-ID
Content-Type:只限于三个值application/x-www-form-urlencoded、multipart
否则为非简单请求
比如put delete方法的请求 发送json格式的ajax请求 带自定义头的ajax请求
axios.interceptors.response.use(
(config) => {
console.log(config);
return config;
},
(error) => {
if (error.response) {
const { status } = error.response;
switch (status) {
case 404:
alert("url错误");
break;
case 401: {
alert("iii");
}
}
console.log(error.response);
console.log('响应时错误');
} else if (error.request) {
console.log(error.request);
console.log('请求时错误');
}
return Promise.reject(error); //必须返回才可以
}
);
methods: {
handleShow() {
axios
.post("/setUserInfo1",{
name:'zz',
email:'222'
}, {
cancelToken: source.token,
})//请求时错误//因为请求未发出去
axios 预检
当axios的请求为非简单请求时,浏览器会进行预检,及发送OPTIONS请求。请求到服务器,询问是否允许跨域。
如果响应中允许预检中请求的跨域行为,则浏览器会进行真正的请求。否则会报405错误。
axios.interceptors.response.use(
(config) => {
console.log(config);
return config;
},
(error) => {
if (error.response) {
const { status } = error.response;
switch (status) {
case 404:
alert("url错误");
break;
case 401: {
alert("iii");
}
}
console.log(error.response);
console.log('响应时错误');
} else if (error.request) {
console.log(error.request);
console.log('请求时错误');
}
return Promise.reject(error); //必须返回才可以
}
);
methods: {
handleShow() {
axios
.post("/setUserInfo",{
name:'zz',
email:'222'
}, {
cancelToken: source.token,
//响应时错误 发送出去了
})