axios 各种方式的请求 示例

GET请求

示例一:

  • 服务端代码
java 复制代码
@GetMapping("/f11")
public String f11(Integer pageNum, Integer pageSize) {
    return pageNum + " : " + pageSize;
}
  • 前端代码
java 复制代码
<template>
  <div class="home">
    <button @click="getFun1">发送get请求</button>
  </div>
</template>
<script>
  import axios from 'axios'
  export default {
    name: 'Home',
    methods: {
      getFun1 () {
        axios.get('http://localhost/blog/f11?pageNum=12&pageSize=8').then(res => {
          console.log(res)
        })
      }
    }
  }
</script>

示例二:

  • 服务端代码
java 复制代码
@GetMapping("/f12")
public String f12(Integer pageNum, Integer pageSize, HttpServletRequest request) {
    String token = request.getHeader("token");
    return pageNum + " : " + pageSize + " : " + token;
}
  • 前端代码
java 复制代码
<template>
  <div class="home">
    <button @click="getFun2">发送get请求</button>
  </div>
</template>
<script>
  import axios from 'axios'
  export default {
    name: 'Home',
    methods: {
      getFun2 () {
        axios.get('http://localhost/blog/f12', {
          params: {
            pageNum: 12,
            pageSize: 8
          },
          headers: {
            token: 'asdf123456'
          }
        }).then(res => {
          console.log(res)
        })
      }
    }
  }
</script>

GET方式采用接口方式携带参数,比如上面示例最终请求服务器端的url是:

POST请求

示例一:

  • 服务端代码
java 复制代码
@PostMapping("/f21")
public String f21(@RequestBody String param) {
    return param;
}
  • 前端代码
java 复制代码
<template>
  <div class="home">
    <button @click="postFun1">发送post请求</button>
  </div>
</template>
<script>
  import axios from 'axios'
  export default {
    name: 'Home',
    data () {
      return {
        queryInfo1: {
          query: {
            username: 'zhangsan',
            password: '1234'
          }
        }
      }
    },
    methods: {
      postFun1 () {
        let _this = this
        axios.post('http://localhost/blog/f21', _this.queryInfo1).then(res => {
          console.log(res)
        })
      },
    }
  }
</script>

结果:

示例二:

  • 服务端代码
java 复制代码
@PostMapping("/f21")
public String f21(@RequestBody String param) {
    return param;
}
  • 前端代码
java 复制代码
<template>
  <div class="home">
    <button @click="postFun2">发送post请求</button>
  </div>
</template>
<script>
  import axios from 'axios'
  export default {
    name: 'Home',
    data () {
      return {
        queryInfo2: {
          username: 'zhangsan',
          password: '1234'
        }
      }
    },
    methods: {
      postFun2 () {
        let _this = this
        axios.post('http://localhost/blog/f21', {
          data: _this.queryInfo2
        }).then(res => {
          console.log(res)
        })
      }
    }
  }
</script>

结果:

示例三:

  • 服务端代码
java 复制代码
@PostMapping("/f23")
public String f23(Integer aa, Integer bb,@RequestBody String query) {
    return aa + ": " + bb + ": " + query;
}
  • 前端代码
java 复制代码
<template>
  <div class="home">
    <button @click="postFun3">发送post请求</button>
  </div>
</template>
<script>
  import axios from 'axios'
  export default {
    name: 'Home',
    data () {
      return {
        queryInfo2: {
          username: 'zhangsan',
          password: '1234'
        }
      }
    },
    methods: {
      postFun3 () {
        let _this = this
        axios.post('http://localhost/blog/f23', _this.queryInfo2, {
          params: { //params表示url中传递的参数,它会拼接在url后面
            aa: 11,
            bb: 22
          }
        }).then(res => {
          console.log(res)
        })
      }
    }
  }
</script>

请求的url为:http://localhost/blog/f23?aa=11\&bb=22 ,结果:

注意上面三个示例中传递到后台的username和password参数采用下面方式后台是无法获取到的:

java 复制代码
@PostMapping("/f22")
public String f22(String username, String password) {
    return username + " : " + password;
}

原因是axios.post默认情况下传递到后台的数据是JSON格式的,通过设置POST请求头,可以告诉服务器请求主体的数据格式为kv的形式,比如:a=aaaa&b=bbbb。

示例:设置POST请求的格式

  • 后台代码
java 复制代码
@PostMapping("/f21")
public String f21(@RequestBody String param) {
    return param;
}
  • 前端代码
java 复制代码
<template>
  <div class="home">
    <button @click="postFun1">发送post请求</button>
    <button @click="postFun2">发送post请求</button>
  </div>
</template>
<script>
  import axios from 'axios'
  axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'
  import qs from 'qs'

  export default {
    name: 'Home',
    methods: {
      postFun1 () {
        let params = new URLSearchParams()
        params.append('username', 'zhangsan')
        params.append('password', '1234')
        axios.post('http://localhost/blog/f22', params).then(res => {
          console.log(res)
        })
      },
      postFun2 () {
        let params = qs.stringify({
          'username': 'zhangsan',
          'password': 1234
        })
        axios.post('http://localhost/blog/f22', params).then(res => {
          console.log(res)
        })
      },
    }
  }
</script>

前端会将参数以kv字符串的形式发送到后台:username=zhangsan&password=1234。上面示例前端网页中请求的也可以用下面控制器接收:

java 复制代码
@PostMapping("/f22")
public String f22(String username, String password) {
    return username + " : " + password;
}

Put

示例一:

  • 前端
java 复制代码
let _this = this
_this.$axios.put(`/user/${user.id}/status`).then(res => {  //注意,此处使用的是反斜杠
  console.log(res)
})
  • 后端
java 复制代码
@PutMapping("/user/{userId}/status")
public Result changStatus(@PathVariable("userId") Integer userId){

}

示例二:

  • 前端
java 复制代码
const param = {
  userId:1
}
_this.$axios.put('/user/update',param).then(res=>{
  console.log(res)
})
  • 后端
java 复制代码
@PutMapping("/user/update")
public Result changStatus(@PathVariable("userId") Integer userId){

}

patch

前端

java 复制代码
const param={
  ids:[1,3,5,8]
}
_this.$axios.patch('/user/p',param).then(res=>{
  console.log(res)
}),

Delete

前端

java 复制代码
_this.$axios.delete('/user/delete',{
   params:{
     id:1
   }
 }).then(res=>{
   console.log(res)
 })
相关推荐
relis15 小时前
解密llama.cpp中的batch与ubatch:深度学习推理优化的内存艺术
深度学习·batch·llama
虚伪的空想家15 小时前
K8S删除命名空间卡住一直Terminating状态
云原生·容器·kubernetes·删除·卡顿·delete·命名空间
九年义务漏网鲨鱼2 天前
PyTorch DDP 随机卡死复盘:最后一个 batch 挂起,NCCL 等待不返回
人工智能·pytorch·batch
Pu_Nine_96 天前
Axios 实例配置指南
前端·笔记·typescript·axios
狂炫一碗大米饭9 天前
JavaScript 中的 Axios:如何发出GET、POST、PUT和DELETE请求
axios
Nayana11 天前
axios-取消重复请求--CancelToken&AbortController
前端·axios
陪我一起学编程14 天前
创建Vue项目的不同方式及项目规范化配置
前端·javascript·vue.js·git·elementui·axios·企业规范
hllqkbb18 天前
从 SGD 到梯度累积:Epoch、Batch、Step 的关系全解析
开发语言·人工智能·opencv·计算机视觉·batch
小徐_233325 天前
uni-app 还在手写请求?alova 帮你全搞定!
前端·uni-app·axios
小徐_23331 个月前
uni-app 网络请求终极选型:uni.request、axios、uni-network、alova 谁才是你的真命请求库?
前端·uni-app·axios