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',
　　　　params: query,
　　　　paramsSerializer: function(params) {
　　　　　　return qs.stringify(params, {arrayFormat: 'repeat'})
　　　　}
　　})
}

請求結果：

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