axios学习笔记（二）
axios方法深入
目录
-
- 一、创建axios实例
- 二、实例的相关配置
- 三、常用参数配置具体使用方法
- 四、拦截器（interceptors）
- 五、错误处理
- 六、取消请求
一、创建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>
四、拦截器（interceptors）
拦截器作用：在请求或响应被处理前拦截他们
拦截器分为两种：请求拦截器和响应拦截器
<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秒还没查询到的话，用户不想查询了，这种情况下会用到取消请求