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

  • 相关阅读:
    怎么知道银行卡号对应的银行
    集合排序、map、枚举
    669. Trim a Binary Search Tree修剪二叉搜索树
    17. Merge Two Binary Trees 融合二叉树
    226. Invert Binary Tree 翻转二叉树
    530.Minimum Absolute Difference in BST 二叉搜索树中的最小差的绝对值
    191. Number of 1 Bits 二进制中1的个数
    Hamming Distance二进制距离
    136. Single Number唯一的数字
    276. Paint Fence篱笆涂色
  • 原文地址:https://www.cnblogs.com/moguzi12345/p/14692513.html
Copyright © 2011-2022 走看看