axios请求方法
主要有get,post,put,patch,delete
get
获取数据
post
提交数据(表单提交+文件上传)
put
更新数据(将所有数据均推放到服务端)
patch
更新数据(只将修改的数据推送到后端)
delete
删除数据
get方法
写法
调用型
axios.get('/data.json').then((res)=>{
console.log(res)
})
axios()型
axios({
method:'get',
url:'/data.json'
}).then((res)=>{
console.log(res)
})
params
如果我们需要加载 : http://localhost:8080/data.json?id=12,应该如何去获取呢?
调用型
axios.get('/data.json',{
params:{
id:12
}
}).then((res)=>{
console.log(res)
})
axios()方法型
axios({
method:'get',
url:'/data.json',
params:{
id:12
}
}).then((res)=>{
console.log(res)
})
post方法
写法
调用型
axios.post('/post',{},config)
post方法有三个参数,分别是url、数据、config。config参数暂时不讨论。
一般上传的数据分两种
- form-data 表单提交(图片上传、文件上传)
- application/json
- 以上两种数据,都可以在请求发起后,进入浏览器network查看请求头中的content-type进行查看
假设我们现在要上传一个数据:
let data = { id:12 }
那么我们可以直接将其传入:
axios.post('/post',data).then((res)=>{
console.log(res)
})
axios()方法型
axios({
method:'post',
url:'/post',
data:data
}).then(...)
两种数据的小细节
当我们上传的是一个一般的let data = { id:12 }
数据时,Network的请求头里会显示为:application/json;charset=UTF-8
当我们上传的是:
let data = {id:12}
let formData = new FormData()
for(let key in data){
formData.append(key,data[key])
}
这里将data转格式了,格式变为formdata形式。
那么Network的请求头里会显示为:multipart/form-data; boundary=----WebKitFormBoundarywWFnSlPye1ZF8CSw
put方法和patch方法
形式与post方法大体相同,Network显示仅Request Method不同。
delete方法
写法
url删除法
//直接从url里面删除
axios.delete('/data.json',{
params:{
id:12
}
}).then((res)=>{
console.log(res)
})
从url删除,Network请求头最后面会显示为:Query String Parameters
请求体删除法
axios.delete('/data.json',{
data:{
id:12
}
}).then((res)=>{
console.log(res)
})
从请求体里删除,Network请求头最后面会显示为:Request Payload
两种方法的删除方式是不同的,具体使用需要和后端沟通。
并发请求
简介
同时进行多个请求,并统一处理返回值。
案例:假设有一个聊天工具,同时有你的聊天记录和个人信息。此时需要调用两个接口去请求数据。此时需要统一处理他们的返回值。
axios提供的方法:all、spread
axios.all方法接受一个数组作为参数,数组中的每个元素都是一个请求,返回一个promise对象,当数组中所有请求均已完成时,执行then方法。 在then方法中执行了 axios.spread 方法。该方法是接收一个函数作为参数,返回一个新的函数。接收的参数函数的参数是axios.all方法中每个请求返回的响应。
function getUserAccount() {
return axios.get('/user/12345');
}
function getUserPermissions() {
return axios.get('/user/12345/permissions');
}
axios.all([getUserAccount(), getUserPermissions()])
.then(axios.spread((acct, perms) => {
// 两个请求都完成后,acct是getUserAccount的返回值,同理,perms是 getUserPermissions的返回值
}));
axios实例简介
为什么要用实例?
当我们需要用到不同的后端域名,直接调用axios.get
并不太方便。我们可以用创建实例的方式去调用,不同的域名用不同的实例一一对应。
表现形式
created() {
let instance = axios.create({
baseURL:'http://localhost:8080',//基本请求路径
timeout:1000,//超时设定
})
instance.get('/data.json').then(res=>{
console.log(res)
})
}
基本配置方法
baseURL:'http://localhost:8080',//请求的域名、基本地址
timeout:1000,//请求超时时长(ms)
url:'/data.json',//请求路径
method:'get,post,put,patch,delete',//请求方法
headers:{
token:''//代表当前登陆人的身份信息
},//设置请求头
params:{},//将请求参数拼接在url上,是一个对象
data:{}//将请求参数放在请求体里,是一个对象
其中,params和data表现形式为对象。
使用场景通常是发起请求时,顺带传送参数:
//以get请求为例,get有两个配置,分别是相对路径和config
axios.get('/data.json',{
params:{
//参数
}
})
参数配置方法
1.全局配置
axios.defaults.基本配置方法(baseurl等)
如:
axios.defaults.timeout = 1000 //全局配置请求时长1s
2.实例配置
let instance = axios.create(
//基本配置方法
)
如果设置了全局的配置方法,而实例配置中没有设置相应的方法,则延用全局的方法,否则,以实例中的方法为主。
3.axios请求配置
视具体情况而定,如调用某个路径的文件巨大,我们可以单独对其请求时长进行设置:
instance.get('/data.json',{
timeout:5000
})
总结
优先级:请求配置 > 实例配置 > 全局配置
拦截器
在发起请求前做一些处理,再发起请求后再做一些处理。
分为请求拦截器和响应拦截器
请求拦截器
axios.interceptors.request.use(
config=>{
//在发送请求前做些什么
return config
},
err=>{
// 在请求错误的时候做些什么(此处错误,请求没有到后端)
return Promise.reject(err)//这里返回一个promise对象
}
)
响应拦截器
axios.interceptors.responce.use(
res=>{
//请求成功对响应数据进行处理
return res
},err=>{
//响应错误做些什么(此处错误,到达后端后返回)
return Promise.reject(err)
}
)
两者都在响应错误后进行了promise对象的返回,具体的作用是什么呢?
axios.get().then().catch(err=>{})
这一段代码是我们平时发送get请求时的标准形态,then会执行请求成功后的操作,catch用来捕获错误。
我们前面拦截响应后,无论是请求还是响应的拦截器,他们的err返回的promise都会进入catch中。
取消拦截器(了解即可)
let inerceptors = axios.interceptors.request.use
(config=>{
config.header = {
auth:true
}
return config
})
axios.inerceptors.request.eject(interceptors) //用axios全局去调用interceptors,这样就取消拦截了。。。
举个栗子
通过拦截器控制登陆状态
// 登陆状态,有token
let request = axios.create({})
request.interceptors.request.use
(config => {
config.headers.token = ''
return config
})
// 非登陆状态,无token
let request2 = axios.create({})
有token的可以访问更多,get更多的数据,无token则不行。类似于评论需要登陆
错误处理
表现形式
//首先设置拦截器
axios.interceptors.request.use(
config =>{
return config
},err =>{
return Promise.reject(err)
}
)
axios.interceptors.response.use(
res =>{
return res
},err =>{
return Promise.reject(err)
}
)
//错误的获取
axios.get('/data.json').then(res=>{
console.log(res)
}).catch(err =>{
console.log(err) //所有错误处理都会进入此处
})
具体的实践过程中,我们需要创建一个统一的错误处理,将所有的错误类型都放在拦截其中,方便我们后面调用接口时使用。
栗子
//创建一个请求实例
let instance = axios.create({})
//为请求实例添加请求拦截器
instance.interceptors.request.use(
config =>{
return config
},err =>{
//请求错误 一般http状态码以4开头,常见:401超时,404 not found 多为前端浏览器错误
return Promise.reject(err)
}
)
instance.interceptors.response.use(
res=>{
return res
},err =>{
//响应错误,一般http状态码以5开头,500系统错误,502系统重启等,偏向于服务端返回的报错
return Promise.reject(err)
}
)
//使用
instance.get('data').then(res=>{
console.log(res)
}).catch(err =>{
console.log(err)
})
取消请求
用于取消正在进行的http请求,比较少用到,就不做介绍了