什么是Axios
Axios 是一个基于promise的http库
特性
- 支持promise API
- 拦截请求和相应
- 转换请求数据和相应数据
- 取消请求
- 自动转换JSON数据
- 客户端支持防御XSRF攻击
兼容性:主流浏览器都兼容,IE支持8以上
常用请求方法
get,post,put,patch,delete
get:获取数据
axios.get('/data.json').then((res) => {console.log(res)})
//带有参数的情况
//最终请求路径 http://localhost:8080/data.json?id=12
axios.get('/data.json', {
params:{
id:12
}
}).then((res) => {console.log(res)})
//第二种写法
axios({
method: "get",
url: '/data.json',
params:{ id:12 }
})
post:提交数据(表单提交+文件上传)
//提交数据的格式有两种
//content-type:application/json (目前常用,以json形式发送)
let data = { id: 12 }
//别名写法
axios.post('/post', data).then((res) => {console.log(res)})
//
//第二种写法
axios({
method:'post',
url:'/post',
data:data //传输的数据放入请求体中
}).then((res) => {console.log(res)})
//form-data 表单提交 (文件上传,图片上传)
let formData = new FormDate()
for( let key in data){
formData.append(key, data[key])
}
axios.post('/post', formData)
第一种提交数据的格式
请求体格式
第二种提交数据格式
put:更新数据(所有数据都推送到服务端)
axios.put('/put', data).then((res) => {console.log(res)})
patch:编辑更新数据(只将修改的数据推送到服务端(如果数据量很大,而只是修改很少的部分,推荐使用))
axios.put('/put', data).then((res) => {console.log(res)})
注意:put和patch与post的差别只是Request Method不同,意思就是你用post代替他们效果是一样的,但是不符合规范
delete:顾名思义删除数据
//数据在url上传输
axios.delete('/delete', {
params: { id:12 }
}).then((res) => {console.log(res)})
//数据在请求体上传输
axios.delete('/delete', {
data: { id:12 }
}).then((res) => {console.log(res)})
//第二种写法
axios({
method:'delete',
url:'/delete',
data:data //
}).then((res) => {console.log(res)})
并发请求:
同时进行多个请求,并统一处理返回值
axios.all([//并发请求放在数组中
axios.get('url1'),
axios.get('url2')
]).then(
axios.spread((data1, data2) => {//参数就是all方法并发请求的顺序返回值
console.log('data1')
console.log('data2')
})
)
其实并发请求在物理层面上也是有先后顺序的,与你写的请求先后顺序有关,它不是并行,只是逻辑上同时请求
axios在vue中的实例
//当你请求的后端不止一个域名的时候,可以创建axios实例
let instance = axios.create({
baseURL:"http://localhost:8080",//配置默认的请求后端域名,基本地址
timeout: 1000 //请求超时时长,单位毫秒
url:'' //请求路径,拼接在baseURL之后
method:'',//请求方法
headers:{ //请求头
token:''//设置token
},
params:{} //请求参数拼接在url
data: {} //请求参数放在请求体
})
//使用这个实例
instance.get()
let instance2 = axios.create({
baseURL:"http://localhost:8081",
timeout: 2000
})
//使用这个实例
instance2.get()
axios配置
- 全局配置
axios.defaults.参数(作用域为所以axios请求,优先级最低)
- 实例配置
axios.create({添加配置参数(作用域为该实例的所有请求,优先级第二)})
- 请求配置
axios.get('/data.json', {添加配置参数(作用域为当前请求,优先级最高)})
拦截器
请求或响应被处理前拦截它们
分为 请求拦截器和响应拦截器两种
//请求拦截器
axios.interceptors.request.use(
config => {
//在发送请求前做的事情
return config
}, err => { //在请求错误 如404 not found 401超时 的时候做的事情
return Promise.reject(err)
})
//响应拦截器
axios.interceptors.response.use(
res => {
//请求成功对响应数据做处理
return res //会返回到具体的请求方法作为.then()的参数
}, err => { //在响应错误 如500系统错误,502系统重启 的时候做的事情
return Promise.reject(err)//会返回到具体的请求方法作为.catch()的参数
})
错误处理
请求错误时进行的处理 axios.catch(err => {})
一般在实际开发中,添加统一的错误处理,也就是拦截器
取消请求
用于正在进行的http请求
//定义取消请求
let source = axios.CancelToken.source()
axios.get('/path', {
cancelToken: source.token
}).then(res => {console.log(res)})
.catch(err => {console.log(err)})
//取消请求
source.cancel('cancel http') //参数会传到需要取消请求的catch的err中