zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    Altium Designer 快捷键与技巧
    常用贴片三极管型号与丝印的对应关系(SOT23)
    buck型DC-DC分析
    IAR升级之后,编译stm32官方工程报错的解决办法
    单片机中不带字库LCD液晶屏显示少量汉字
    结构体应用及其字节对齐问题
    退出循环break,continue,return,goto分析
    金莎伪粉丝的日常
    keil5 mdk使用ST-Link II下载出现cannot halt the core解决办法
    keil5 mdk调用外部编辑器notepad++、sublime3、VSCode总结
  • 原文地址:https://www.cnblogs.com/moguzi12345/p/14692513.html
Copyright © 2011-2022 走看看