vue axios 常见的5种接口请求方法

假设需要传参的数据，如：

let par = {
    name: this.menu_name,
    sort: this.sort,
    hidden: Number(this.exhibition),
    remark: this.remarks,
    pic: '',
    picBase64: '',
    operator: getadminId(),
}

1、get（获取数据）：

//方法一
axios.get('/api/home/headerlist',{
　　params: {
　　　　...par
　　}
}).then((res)=>{
　　console.log(res)
})

//方法二
axios({
　　method: 'get',
　　url: '/api/home/headerlist',
　　params: {
　　　　...par
　　}
}).then(res=>{
　　console.log(res)
})

当 get 的参数是数组的时候：

　　接口请求：

import qs from 'qs'
export function showImg(query) {
　　return request({
　　　　url: '/home/img',
　　　　method: 'get',
}

请求结果：

vue axios 常见的5种接口请求方法

2、post（提交数据）：

//方法一
axios.post('/post', {
　　...par
}).then((res)=>{
　　console.log(res)
})
//方法二
axios({
　　method: 'post',
　　url: '/post',
　　data: {
　　　　...par
　　}
}).then(res=>{
　　console.log(res)
})

3、put（更新全部数据）：

//方法一
axios.put('/api/home/headerlist', {
　　...par
}).then(res => {
　　console.log(res);
})//方法二
axios({
　　method: 'put',
　　url: '/api/home/headerlist',
　　data: {
　　　　...par
　　}
}).then(res=>{
　　console.log(res)
})

4、patch（更新局部数据）：

//方法一
axios.patch('/api/home/headerlist',{
    ...par
}).then((res)=>{
　　console.log(res)
})
//方法二
axios({
　　method: 'patch',
　　url: '/api/home/headerlist',
　　data: {
　　　　...par
　　}
}).then(res=>{
　　console.log(res)
})

5、delete（删除数据）：

//方法一
axios.delete('/api/home/headerlist',{
　　params: {
　　　　...par
　　}
}).then((res)=>{
　　console.log(res)
})
//方法二
axios({
　　method: 'delete',
　　url: '/api/hemo/headerlist',
　　params: {
　　　　...par
　　}
}).then(res=>{
  console.log(res)
})

put 和 patch 的区别( 用来对已知资源进行局部更新 )：https://segmentfault.com/q/1010000005685904

vue axios 常见的5种接口请求方法

相关推荐