一、分类
get:请求数据
post:提交数据
put:更新数据(所有的数据都推送到后端)
patch:更新数据(只推送更新的数据到后端)
delete:删除数据
二、使用get,post,put,patch,delete,以及并发请求
config
config = {
baseURL: '',//请求的基本地址
timeout: 1000,//超时时间
url: '',//请求路径
method: '',//请求方法
headers: {},//设置请求头
params: {},//请求参数,放在URL上
data: {} //请求参数,放在请求体
}
get
//get
//方式一:
axios.get(url, config).then((res) => { })
//例子
axios.get(url, { params: {id:8} }).then((res) => { console.log(res)})
//最后请求的是url?id=8,返回的数据在res中
//方式二:
axios({
method: "get",
url: "",
params: {},
......
}).then((res) => { })
post
//post
//方式一
axios.post(url, data, config).then((res) => { })
//这里的data就是前端传输过去的数据。不用写成下面的形式,当然你可以试一试下面会则呢么样。
//axios.post(url,{data:{id:2}}).then((res) => { })
//方式二
axios({
method: "post",
url: "",
data: ,
}).then((res) => { })
put
//put
axios.put(url, data, config).then((res) => { })
axios({
method: "put",
url: "",
data:
}).then((res) => { })
patch
//patch
axios.patch(url, data, config).then((res) => { })
axios({
method: "patch",
url: "",
data:
}).then((res) => { })
delete
//delete
//方法一:使用params,参数在url中
axios.delete(url, { params: {} }).then((res) => { })
axios({
method: "delete",
url: "",
params: {}
}).then((res) => { })
方法二:使用data,参数在request中
axios.delete(url, { data: {} }).then((res) => { })
axios({
method: "delete",
url: "",
data: {}
}).then((res) => { })
并发请求
//并发请求
axios.all([
axios.get('url1'),
axios.get('url2')
]).then(axios.spread((res1, res2) => { }))
三、实例、拦截器、错误处理
创建实例,以及配置
//创建实例
let instance = axios.create({
baseURL: '',//请求的基本地址
timeout: 1000,//超时时间
url: '',//请求路径
method: '',//请求方法
headers: {},//设置请求头
params: {},//请求参数,放在URL上
data: {} //请求参数,放在请求体
})
//使用方法和上面的axios一样
instance.get(url, { params: {} }).then((res) => { })
//全局配置
axios.defaults.timeout = 10,
//实例配置
instance.defaults.timeout = 100,
//请求配置,也就是前面案例中的config
instance.get(url, { timeout = 1000 }).then((res) => { })
拦截器
//请求拦截
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().then().catch(err=>{
//其实就是拦截器里面的错误
})
求点赞~~