axios方法深入
为什么要创建axios实例?
后端接口地址有多个,并且超时时常不一样,有了axios实例,可以用实例去请求
export default {
created() {
let instance = axios.create({
baseURL: 'http://localhost:8080', //请求的域名,基本地址
timeout: 1000, //超时时常,超时时常是指在发起http请求的时候,如果服务端长时间没有返回数据,接口就会报401
})
instance.get('/data.json').then((res) => {
console.log(res)
})
},
}
注意:baseURL和timeout是基本的参数
常用配置
(1)baseURL //请求的域名,基本地址
(2)timeout //超时时常,超时时常是指在发起http请求的时候,如果 服务端长时间没有返回数据,接口就会报401
(3) url //请求路径
(4) method: //请求方法
(5) headers: //请求头
(6)params: //请求参数拼接在url上
(7)data: //请求参数放在请求体上
<script>
import axios from 'axios'
export default {
created() {
let instance = axios.create({
baseURL: 'http://localhost:8080', //请求的域名,基本地址
timeout: 1000, //超时时常,超时时常是指在发起http请求的时候,如果服务端长时间没有返回数据,接口就会报401
url: '/data.json', //请求路径
method: 'get', //请求方法
headers: {
//请求头
},
params:{
}, //请求参数拼接在url上
data:{
} //请求参数放在请求体上
})
axios.get('/data.json') //这个路径是相对路径,前面还有baseURL
},
}
</script>
实例的相关配置有三种,分别是axios全局配置、axios实例配置、axios请求配置
注意
(1)axios全局配置(一般配timeout和baseURL就可以),实际开发中全局配置用的比较少
(2)优先级:axios请求配置>axios实例配置>axios全局配置
<script>
import axios from 'axios'
export default {
created() {
let instance = axios.create({
baseURL: 'http://localhost:8080', //请求的域名,基本地址
timeout: 1000, //超时时常,超时时常是指在发起http请求的时候,如果服务端长时间没有返回数据,接口就会报401
url: '/data.json', //请求路径
method: 'get', //请求方法
headers: {
//请求头
},
params: {
}, //请求参数拼接在url上
data: {
}, //请求参数放在请求体上
})
//全局配置
axios.defaults.timeout = 1000
axios.defaults.baseURL = 'http://localhost:8080'
//axios实例配置
let instance=axios.create()
instance.defaults.timeout=3000 //如果已经创建了实例,可以通过default的方式来进行修改
//axios请求配置
instance.get('/data.json',{
timeout:5000 //修改配置
})
},
}
</script>
假设在实际开发中,有两个请求接口:
http://localhost:9090
http://localhost:9091
<script>
import axios from 'axios'
export default {
created() {
//实际开发
//有两个请求接口:
//http://localhost:9090
//http://localhost:9091
let instance = axios.create({
baseURL: 'http://localhost:9090',
timeout: 1000,
})
let instance1 = axios.create({
baseURL: 'http://localhost:9091',
timeout: 3000,
})
instance .get('/orderList', {
params: {
},
}) .then((res) => {
console.log(res)
}) //这里用到了baseURL,method,params,timeout,url
instance1.get('/detail', {
timeout: 5000, //重新设置timeout
//这里用到了method,baseURL,url,timeout:5000
}).then((res) => {
console.log(res)
})
},
}
</script>
拦截器作用:在请求或响应被处理前拦截他们
拦截器分为两种:请求拦截器和响应拦截器
<script>
import axios from 'axios'
export default {
created() {
//请求拦截器
axios.interceptors.request.use(
(config) => {
//在请求前做些什么
return config
},
(err) => {
//在请求错误的时候做些什么
}
) //use有两个参数,一个请求前的一个请求后的
//响应拦截器
axios.interceptors.response.use(
(res) => {
//请求成功对响应数据做处理
return res
},
(err) => {
//响应错误做些什么
return Promise.reject(err)
}
)
},
}
</script>
错误处理(catch):请求错误进行的处理
[请求成功就是then]
在实际开发中,一般添加统一错误处理
什么情况下可能用到取消请求?
比如商城系统涉及到查询 ,这个查询可能请求时间比较长,可能3-5秒,如果3-5秒还没查询到的话,用户不想查询了,这种情况下会用到取消请求