1、axios函数参数简单介绍
首先要明白axios的参数是一个对象,我们依靠设置该对象的属性名来配置请求的具体参数
method是请求类型
url是请求地址
params是用于查询参数传参,get请求传参
data是用于请求体参数传参,post请求传参
axios({
method: '请求的类型',
url: '请求的URL地址',
params: {},
// data: {},
}).then((result) => {
// .then 用来指定请求成功之后的回调函数
// 形参中的 result 是请求成功之后的结果
})
2、axios中的get请求
axios({
method: 'get',
url: '请求的URL地址',
params: {
id: 1 //params传参的本质就是请求的URL地址后跟?id=1,通过路径进行传参
}
}).then((result) => {
// .then 用来指定请求成功之后的回调函数
// 形参中的 result 是请求成功之后的结果
})
get请求简写
axios.get('请求的URL地址', {
params: {
id: 1 //params传参的本质就是请求的URL地址后跟?id=1,通过路径进行传参
}
}
}).then((result) => {
// .then 用来指定请求成功之后的回调函数
// 形参中的 result 是请求成功之后的结果
})
3、axios中的post请求
axios({
method: 'post',
url: '请求的URL地址',
data: {
username: '张三',
password: '123456' //data传参的本质是把请求参数转为json格放在请求体中
}
}).then((result) => {
// .then 用来指定请求成功之后的回调函数
// 形参中的 result 是请求成功之后的结果
})
post请求简写
axios.post('请求的URL地址', {
username: '张三',
password: '123456' //data传参的本质是把请求参数转为json格放在请求体中
}).then((result) => {
// .then 用来指定请求成功之后的回调函数
// 形参中的 result 是请求成功之后的结果
})
4、axios中拦截器的使用
首先要明白拦截器(interceptors)就是用来全局拦截 axios 的每一次请求与响应
// 添加请求拦截器
axios.interceptors.request.use(function (config) {
// 在发送请求之前做些什么
return config
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error)
})
// 添加响应拦截器
axios.interceptors.response.use(function (response) {
// 对响应成功的数据做点什么
return response
}, function (error) {
// 对响应错误做点什么
return Promise.reject(error)
})
注意:一部分请求拦截器因为所有请求,无须逻辑判断,都要执行操作,所以记性了全局的 axios 默认值
axios.defaults.baseURL = 'https://www.api.com'
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'
以上是axios最简洁明了的使用方式,详细参阅axios官方文档哦,毕竟麻麻赖赖的属性一大堆的[狗头]