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

posted @ 2021-04-23 09:58  小蘑菇123  阅读(1667)  评论(0编辑  收藏  举报