axios

西河刘卡车医  金牌会员 | 2024-9-10 01:54:29 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 871|帖子 871|积分 2613

媒介

使用 vue 开发时，频仍使用到了 axios 这个网络请求库，这里对其做一个发起请求时携带参数方式的小结。
一、根本使用

1.1. GET 请求

注意：GET 请求无请求体，可以是可以有请求体 body 的,但是不建议带。
为什么不建议带请求体？
:::details 由文心大模子 3.5 生成
在 HTTP 协议中，GET 请求通常用于请求数据，而 POST 请求则通常用于提交数据。这是因为 GET 和 POST 请求在语义和使用上有一些不同：

  • 语义上的不同：

    • GET 请求：通常用于请求数据，它的语义是“获取”或“查询”。浏览器会把 GET 请求的效果（相应体）直接展示给用户。
    • POST 请求：通常用于提交数据，它的语义是“提交”或“更新”。POST 请求的效果通常是一个操纵的效果，而不是直接展示给用户的数据。

  • 请求体的处置惩罚：

    • GET 请求：虽然 GET 请求可以包含请求体（body），但大多数 HTTP 客户端和服务器在处置惩罚 GET 请求时都会忽略请求体。这是因为 GET 请求的筹划初衷就是为了从服务器获取数据，而不是提交数据。GET 请求的查询参数应该放在 URL 的查询字符串中，而不是请求体中。
    • POST 请求：POST 请求通常包含请求体，用于提交数据给服务器。服务器会处置惩罚 POST 请求的请求体来获取提交的数据。

  • 缓存和书签：

    • GET 请求是幂等的和安全的，这意味着多次执行相同的 GET 请求应该得到相同的效果，并且不会改变服务器上的任何数据。因此，浏览器通常会对 GET 请求举行缓存。假如 GET 请求包含请求体，这大概会导致缓存行为不一致或不可预测。
    • 由于 GET 请求的 URL 通常会被浏览器记载在历史记载或书签中，假如 URL 中包含了敏感信息（这些信息通常应该放在请求体中），那么这些信息大概会被泄露。

  • URL 长度限制：

    • 浏览器和服务器通常对 URL 的长度有肯定的限制。假如 GET 请求包含大量的数据在 URL 中（通过查询参数），这大概会导致 URL 超过长度限制。

  • 安全性：

    • 将敏感信息（如密码、私钥等）放在 GET 请求的 URL 中是不安全的，因为这些信息大概会被记载在浏览器历史、服务器日志或代理缓存中。这些信息应该通过 POST 请求放在请求体中，并使用得当的加密和身份验证机制来保护。

综上所述，虽然技术上 GET 请求可以包含请求体，但出于上述原因，通常不建议在 GET 请求中包含请求体。在实际开发中，应该根据请求的性子和目标选择合适的 HTTP 方法，并遵照相应的最佳实践。
:::
1.1.1. 使用 GET 方式举行无参请求

接口
  1. @GetMapping("/get/getAll")
  2. public ResResult getAllUser(){
  3.          List<User> list = userService.list();
  4.          return ResResult.okResult(list);
  5. }
复制代码
请求
  1. axios({
  2.          url:'http://localhost:8080/get/getAll',
  3.          method:'get'
  4. }).then(res=>{
  5.          console.log(res.data.data)
  6. })
复制代码
1.1.2. 使用 GET 方式请求，参数值直接放在路径中

接口
  1. @GetMapping("/get/{id}")
  2. public ResResult getUserById(@PathVariable("id") Long id){
  3.          User user = userService.getById(id);
  4.          return ResResult.okResult(user);
  5. }
复制代码
请求
  1. axios({
  2.          url:'http://localhost:8080/get/1',
  3.          method:'get'
  4. }).then(res=>{
  5.          console.log(res.data.data)
  6. })
复制代码
1.1.3. 使用 GET 方式请求，参数拼接在路径中

拼接方式 ①
使用 ? 举行参数拼接
接口
  1. @GetMapping("/get")
  2.      public ResResult getUserByIds(@RequestParam("id") Long id){
  3.          User user = userService.getById(id);
  4.          return ResResult.okResult(user);
  5. }
复制代码
请求
  1. axios({
  2.          url:'http://localhost:8080/get?id=1',
  3.          method:'get'
  4. }).then(res=>{
  5.          console.log(res.data.data)
  6. })
复制代码
拼接方式 ②
使用 params 【单个参数】
接口
  1. @GetMapping("/get")
  2.     public ResResult getUserByIds(@RequestParam("id") Long id){
  3.         User user = userService.getById(id);
  4.         return ResResult.okResult(user);
  5. }
复制代码
请求
  1. axios({
  2.          url:'http://localhost:8080/get',
  3.          params:{
  4.                  id:'2'
  5.          },
  6.          method:'get'
  7. }).then(res=>{
  8.          console.log(res.data.data)
  9. })
复制代码
拼接方式 ③
使用 params 【多个参数】
接口
  1. @GetMapping("/get")
  2.     public ResResult getUserByIds(@RequestParam("id") Long id,@RequestParam("username") String username){
  3.         LambdaQueryWrapper<User> wrapper = new LambdaQueryWrapper<>();
  4.         wrapper.eq(User::getUsername,username);
  5.         wrapper.eq(User::getId,id);
  6.         User user = userService.getOne(wrapper);
  7.         return ResResult.okResult(user);
  8. }
复制代码
请求
  1. axios({
  2.         url:'http://localhost:8080/get',
  3.         params:{
  4.                 id:'2',
  5.                 username:'swx'
  6.         },
  7.         method:'get'
  8. }).then(res=>{
  9.         console.log(res.data.data)
  10. })
复制代码
当 POST 有参请求且是简写时，要以 JSON 格式请求
  1. axios.post('http://localhost:8080/post',"id=2&username=swx").then(res=>{
  2.         console.log(res.data.data)
  3. }).catch(err=>{
  4.         console.log('timeout')
  5.         console.log(err)
  6. })
复制代码
1.1.4. GET 请求的简写方式

无参时：
  1. axios.get('http://localhost:8080/get/getAll').then(res=>{
  2.         console.log(res.data.data)
  3. }).catch(err=>{
  4.         console.log('timeout')
  5.         console.log(err)
  6. })
复制代码
有参时：
  1. axios.get('http://localhost:8080/get',{params:{id:'2',username:'swx'}}).then(res=>{
  2.         console.log(res.data.data)
  3. }).catch(err=>{
  4.         console.log('timeout')
  5.         console.log(err)
  6. })
复制代码
1.2. POST 请求

注意：POST 请求的有参、无参请求与如上的 GET 是一样的，只不外是请求方式名换一下。
如下是 POST 请求简写与传入配置项写法时，关于请求体格式的一点区别：
接口
  1. var express = require('express')
  2. var path = require('path')
  3. var bodyParser = require('body-parser')
  4. const { json } = require('body-parser')
  5. var app = express()
  8. app.use(express.static(path.join(__dirname, 'public')))
  10. app.use(bodyParser.urlencoded({ extended: false }))
  11. app.use(bodyParser.json())
  14. app.get('/a', function(req, res) {
  15.     console.log(req.query)
  16.     res.send({ "id": 1, "name": "张三" })
  17. })
  21. app.listen(3000, function() {
  22.     console.log('app is runing...')
  23. })
复制代码
请求
写法 ①
假如使用 Axios 的 POST 请求的简写情势，必要将数据以 JSON 格式传递。
  1. axios.post('/a', {
  2.         "id": 5,
  3.         "name": "ssss"
  4. }).then(response => {
  5.         console.log('/a1', response.data)
  6. }, error => {
  7.         console.log('错误', error.message)
  8. })
复制代码
请求
写法 ②
假如将数据直接作为请求体传递，不必要将数据写成 JSON 格式。axios 会根据请求头的 Content-Type 自动处置惩罚数据格式。
  1. axios({
  2.                 method: 'POST',
  3.                 url: '/a',
  4.                 data: {
  5.                         id: 1,
  6.                         name: "张三"
  7.                 }
  8.         })
  9.         .then(response => {
  10.                 console.log('/a', response.data)
  11.                 return response.data
  12.         }, error => {
  13.                 console.log('错误', error.message)
  14.         })
复制代码
二、请求失败处置惩罚

  1. axios.get('http://localhost:8080/get',{params:{id:'2',username:'swx'}}).then(res=>{
  2.         console.log(res.data.data)
  3. }).catch(err=>{
  4.         console.log('timeout')
  5.         console.log(err)
  6. })
复制代码
三、axios 并发请求

方式 1
接口
  1. @GetMapping("/get/getAll")
  2.     public ResResult getAllUser(){
  3.         List<User> list = userService.list();
  4.         return ResResult.okResult(list);
  5.     }
  7. @GetMapping("/get/get")
  8.     public ResResult getUserByIdt(@RequestParam("id") Long id){
  9.         User user = userService.getById(id);
  10.         return ResResult.okResult(user);
  11.     }
复制代码
请求
  1. axios.all([
  2.         axios.get('http://localhost:8080/get/getAll'),
  3.         axios.get('http://localhost:8080/get/get',{params:{id:'1'}})
  4. ]).then(res=>{
  5.         //返回的是数组，请求成功返回的数组
  6.         console.log(res[0].data.data),
  7.         console.log(res[1].data.data)
  8. }).catch(err=>{
  9.         console.log(err)
  10. })
复制代码
方式 2：使用 spread 方法处置惩罚返回的数组
  1. <script>
  2.   axios
  3.     .all([
  4.       axios.get("http://localhost:8080/get/getAll"),
  5.       axios.get("http://localhost:8080/get/get", { params: { id: "1" } }),
  6.     ])
  7.     .then(
  8.       axios.spread((res1, res2) => {
  9.         console.log(res1.data.data), console.log(res2.data.data);
  10.       })
  11.     )
  12.     .catch((err) => {
  13.       console.log(err);
  14.     });
  15. </script>
复制代码
四、axios 全局配置

  1. axios.defaults.baseURL='http://localhost:8080'; //全局配置属性
  2. axios.defaults.timeout=5000; //设置超时时间
  4. //发送请求
  5. axios.get('get/getAll').then(res=>{
  6.         console.log(res.data.data)
  7. });
  9. axios.post('post/getAll').then(res=>{
  10.         console.log(res.data.data)
  11. });
复制代码
五、axios 实例

  1. //创建实例
  2. let request = axios.create({
  3.         baseURL:'http://localhost:8080',
  4.         timeout:5000
  5. });
  6. //使用实例
  7. request({
  8.         url:'get/getAll'
  9. }).then(res=>{
  10.         console.log(res.data.data)
  11. });
  13. request({
  14.         url:'post/getAll',
  15.         method:'post'
  16. }).then(res=>{
  17.         console.log(res.data.data)
  18. })
复制代码
六、axios 拦截器

axios 提供了两大类拦截器：


  • 一种是请求方向的拦截（成功的、失败的）
  • 一种是相应方向的拦截（成功的，失败的）
拦截器作用：
比如：请求之前在请求头加 token、逼迫登录
相应的时候可以举行相应的数据处置惩罚
请求拦截器
  1.     //创建实例
  2.     let request = axios.create({
  3.         baseURL:'http://localhost:8080',
  4.         timeout:5000
  5.     });
  7.     //配置axios拦截器
  8.     request.interceptors.request.use(config=>{
  9.         console.log("请求进来了...")
  10.         console.log("请求成功方向")
  11.         console.log(config.data.data)
  12.         //放行请求，这一步很重要，否则报错
  13.         return config;
  14.     },err=>{
  15.         console.log("请求进来了...")
  16.         console.log("请求失败方向")
  17.         console.log(err)
  18.     });
  20.     //如果没有创建实例，则使用以下方式
  21.     //配置axios拦截器
  22.     // axios.interceptors.request.use(config=>{
  23.     //     console.log("请求进来了...")
  24.     //     console.log("请求成功方向")
  25.     //     console.log(config)
  26.     //     //放行请求
  27.     //     return config;
  28.     // },err=>{
  29.     //     console.log("请求进来了...")
  30.     //     console.log("请求失败方向")
  31.     //     console.log(err)
  32.     // });
  34.     //使用实例
  35.     request({
  36.         url:'get/getAll'
  37.     }).then(res=>{
  38.         console.log(res.data.data)
  39.     });
复制代码
相应拦截器
  1.     //创建实例
  2.     let request = axios.create({
  3.         baseURL:'http://localhost:8080',
  4.         timeout:5000
  5.     });
  7.     //配置axios拦截器
  8.     request.interceptors.response.use(config=>{
  9.         console.log("响应进来了...")
  10.         console.log("响应成功方向")
  11.         console.log(config.data.data)
  12.         //放行响应
  13.         return config;
  14.     },err=>{
  15.         console.log("响应进来了...")
  16.         console.log("响应失败方向")
  17.         console.log(err)
  18.     });
  20.     //使用实例
  21.     request({
  22.         url:'get/getAll'
  23.     }).then(res=>{
  24.         console.log(res.data.data)
  25.     });
复制代码
七、vue 中封装 axios

封装在 request.js 中
  1. //导入axios
  2. import axios from 'axios'
  4. //创建axios实例
  5. const service = axios.create({
  6.   baseURL: 接口地址,
  7.   timeout: 5000
  8. })
  11. //请求拦截器
  12. service.interceptors.request.use(
  13.   config => {
  15.     if (store.getters.token) {
  16.       config.headers['token'] = getToken()
  17.     }
  18.     //放行请求
  19.     return config
  20.   },
  21.   error => {
  22.     console.log(error)
  23.     return Promise.reject(error)
  24.   }
  25. )
  28. //响应拦截器
  29. service.interceptors.response.use(
  30.   response => {
  31.         //返回的数据
  32.     const res = response.data
  34.     if (res.code !== 200) {
  35.       Message({
  36.         message: res.message || 'Error',
  37.         type: 'error',
  38.         duration: 5 * 1000
  39.       })
  41.       // 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired;
  42.       if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
  43.         // to re-login
  44.         MessageBox.confirm('You have been logged out, you can cancel to stay on this page, or log in again', 'Confirm logout', {
  45.           confirmButtonText: 'Re-Login',
  46.           cancelButtonText: 'Cancel',
  47.           type: 'warning'
  48.         }).then(() => {
  49.           store.dispatch('user/resetToken').then(() => {
  50.             location.reload()
  51.           })
  52.         })
  53.       }
  54.       return Promise.reject(new Error(res.message || 'Error'))
  55.     } else {
  56.       return res
  57.     }
  58.   },
  59.   error => {
  60.     console.log('err' + error) // for debug
  61.     Message({
  62.       message: error.message,
  63.       type: 'error',
  64.       duration: 5 * 1000
  65.     })
  66.     return Promise.reject(error)
  67.   }
  68. )
  70. export default service
复制代码
哪个模块必要发送请求直接引入即可，将以上实例导入
比如：此模块的所有请求接口：api 下的 skuInfo.js
  1. //导入axios实例
  2. const api_name = '/admin/product/skuInfo'
  4. export default {
  6.   getPageList(page, limit, searchObj) {
  7.     return request({
  8.       url: `${api_name}/${page}/${limit}`,
  9.       method: 'get',
  10.       params: searchObj
  11.     })
  12.   },
  14.   save(role) {
  15.     return request({
  16.       url: `${api_name}/save`,
  17.       method: 'post',
  18.       data: role
  19.     })
  20.   },
  22.   //新人专享
  23.   isNewPerson(id, status) {
  24.     return request({
  25.       url: `${api_name}/isNewPerson/${id}/${status}`,
  26.       method: 'get'
  27.     })
  28.   },
  29. }
复制代码
list.vue 页面中使用
  1. //先导入
  2. import api from '@/api/product/skuInfo'
  3. ​
  4. api.getPageList(this.page, this.limit, this.searchObj).then(
  5.          response => {
  6.            debugger
  7.            this.list = response.data.records
  8.            this.total = response.data.total
  9. ​
  10.            // 数据加载并绑定成功
  11.            this.listLoading = false
  12.          }
  13.        )
  14.      }
  15. ​
  16. api.save(this.skuInfo).then(response => {
  17.          if (response.code) {
  18.            this.$message({
  19.              type: 'success',
  20.              message: response.message
  21.            })
  22.            this.$router.push({ path: '/product/skuInfo/list' })
  23.            this.saveBtnDisabled = false
  24.          }
  25.        })
  26. ​
  27. //新人专享
  28. handleNewPersonChange(index, row) {
  29.        api.isNewPerson(row.id, row.isNewPerson).then(response => {
  30.          this.$message({
  31.            type: 'info',
  32.            message: '操作成功'
  33.          })
  34.          this.fetchData()
  35.        })
  36.      }
  37.    }
复制代码
main.js 中引入使用
  1. import * as API from '@/api'
  2. ​
  3. Vue.prototype.$API = API
复制代码
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
回复

使用道具 举报

0 个回复

倒序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

西河刘卡车医

金牌会员
这个人很懒什么都没写!

楼主热帖

标签云

挺好的 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表