【Vue3+TypeScript】CRM系统项目搭建之 — Axiox 网络请求封装(一)

简介: 【Vue3+TypeScript】CRM系统项目搭建之 — Axiox 网络请求封装(一)

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


一、基本使用

1.1. GET 请求

注意:GET请求无请求体,可以是可以有请求体body的,但是不建议带。

为什么不建议带请求体?

:::details 由文心大模型 3.5 生成

在HTTP协议中,GET请求通常用于请求数据,而POST请求则通常用于提交数据。这是因为GET和POST请求在语义和使用上有一些不同:

  1. 语义上的不同
  • GET请求:通常用于请求数据,它的语义是“获取”或“查询”。浏览器会把GET请求的结果(响应体)直接展示给用户。
  • POST请求:通常用于提交数据,它的语义是“提交”或“更新”。POST请求的结果通常是一个操作的结果,而不是直接展示给用户的数据。
  1. 请求体的处理:
  • GET请求:虽然GET请求可以包含请求体(body),但大多数HTTP客户端和服务器在处理GET请求时都会忽略请求体。这是因为GET请求的设计初衷就是为了从服务器获取数据,而不是提交数据。GET请求的查询参数应该放在URL的查询字符串中,而不是请求体中。
  • POST请求:POST请求通常包含请求体,用于提交数据给服务器。服务器会处理POST请求的请求体来获取提交的数据。
  1. 缓存和书签
  • GET请求是幂等的和安全的,这意味着多次执行相同的GET请求应该得到相同的结果,并且不会改变服务器上的任何数据。因此,浏览器通常会对GET请求进行缓存。如果GET请求包含请求体,这可能会导致缓存行为不一致或不可预测。
  • 由于GET请求的URL通常会被浏览器记录在历史记录或书签中,如果URL中包含了敏感信息(这些信息通常应该放在请求体中),那么这些信息可能会被泄露。
  1. URL长度限制:
  • 浏览器和服务器通常对URL的长度有一定的限制。如果GET请求包含大量的数据在URL中(通过查询参数),这可能会导致URL超过长度限制。
  1. 安全性
  • 将敏感信息(如密码、私钥等)放在GET请求的URL中是不安全的,因为这些信息可能会被记录在浏览器历史、服务器日志或代理缓存中。这些信息应该通过POST请求放在请求体中,并使用适当的加密和身份验证机制来保护。


综上所述,虽然技术上GET请求可以包含请求体,但出于上述原因,通常不建议在GET请求中包含请求体。在实际开发中,应该根据请求的性质和目的选择合适的HTTP方法,并遵循相应的最佳实践。

:::


1.1.1. 使用 GET 方式进行无参请求

接口

 @GetMapping("/get/getAll")
 public ResResult getAllUser(){
   List<User> list = userService.list();
   return ResResult.okResult(list);
 }

请求

 axios({
   url:'http://localhost:8080/get/getAll',
   method:'get'
 }).then(res=>{
   console.log(res.data.data)
 })
1.1.2. 使用 GET 方式请求,参数值直接放在路径中

接口

 @GetMapping("/get/{id}")
 public ResResult getUserById(@PathVariable("id") Long id){
         User user = userService.getById(id);
         return ResResult.okResult(user);
 }

请求

 axios({
   url:'http://localhost:8080/get/1',
   method:'get'
 }).then(res=>{
   console.log(res.data.data)
 })
1.1.3. 使用 GET 方式请求,参数拼接在路径中

拼接方式 ①

使用 ? 进行参数拼接

接口

 @GetMapping("/get")
     public ResResult getUserByIds(@RequestParam("id") Long id){
         User user = userService.getById(id);
         return ResResult.okResult(user);
 }

请求

 axios({
   url:'http://localhost:8080/get?id=1',
   method:'get'
 }).then(res=>{
   console.log(res.data.data)
 })

拼接方式 ②

使用 params 【单个参数】

接口

@GetMapping("/get")
    public ResResult getUserByIds(@RequestParam("id") Long id){
        User user = userService.getById(id);
        return ResResult.okResult(user);
}

请求

 axios({
   url:'http://localhost:8080/get',
   params:{
     id:'2'
   },
   method:'get'
 }).then(res=>{
   console.log(res.data.data)
 })

拼接方式 ③

使用 params 【多个参数】

接口

@GetMapping("/get")
    public ResResult getUserByIds(@RequestParam("id") Long id,@RequestParam("username") String username){
        LambdaQueryWrapper<User> wrapper = new LambdaQueryWrapper<>();
        wrapper.eq(User::getUsername,username);
        wrapper.eq(User::getId,id);
        User user = userService.getOne(wrapper);
        return ResResult.okResult(user);
 }

请求

axios({
  url:'http://localhost:8080/get',
  params:{
    id:'2',
    username:'swx'
  },
  method:'get'
}).then(res=>{
  console.log(res.data.data)
})

当 POST 有参请求且是简写时,要以 JSON 格式请求

axios.post('http://localhost:8080/post',"id=2&username=swx").then(res=>{
  console.log(res.data.data)
}).catch(err=>{
  console.log('timeout')
  console.log(err)
})
1.1.4. GET 请求的简写方式

无参时:

axios.get('http://localhost:8080/get/getAll').then(res=>{
  console.log(res.data.data)
}).catch(err=>{
  console.log('timeout')
  console.log(err)
})

有参时:

axios.get('http://localhost:8080/get',{params:{id:'2',username:'swx'}}).then(res=>{
  console.log(res.data.data)
}).catch(err=>{
  console.log('timeout')
  console.log(err)
})

1.2. POST 请求

注意:POST 请求的有参、无参请求与如上的 GET 是一样的,只不过是请求方式名换一下。

如下是 POST 请求简写与传入配置项写法时,关于请求体格式的一点区别:

接口

var express = require('express')
var path = require('path')
var bodyParser = require('body-parser')
const { json } = require('body-parser')
var app = express()


app.use(express.static(path.join(__dirname, 'public')))

app.use(bodyParser.urlencoded({ extended: false }))
app.use(bodyParser.json())


app.get('/a', function(req, res) {
    console.log(req.query)
    res.send({ "id": 1, "name": "张三" })
})



app.listen(3000, function() {
    console.log('app is runing...')
})

请求

写法 ①

如果使用 Axios 的 POST 请求的简写形式,需要将数据以 JSON 格式传递。

axios.post('/a', {
  "id": 5,
  "name": "ssss"
}).then(response => {
  console.log('/a1', response.data)
}, error => {
  console.log('错误', error.message)
})

请求

写法 ②

如果将数据直接作为请求体传递,不需要将数据写成JSON格式。axios会根据请求头的Content-Type自动处理数据格式。

axios({
    method: 'POST',
    url: '/a',
    data: {
      id: 1,
      name: "张三"
    }
  })
  .then(response => {
    console.log('/a', response.data)
    return response.data
  }, error => {
    console.log('错误', error.message)
  })


二、请求失败处理

axios.get('http://localhost:8080/get',{params:{id:'2',username:'swx'}}).then(res=>{
  console.log(res.data.data)
}).catch(err=>{
  console.log('timeout')
  console.log(err)
})


三、axios 并发请求

方式 1

接口

@GetMapping("/get/getAll")
    public ResResult getAllUser(){
        List<User> list = userService.list();
        return ResResult.okResult(list);
    }

@GetMapping("/get/get")
    public ResResult getUserByIdt(@RequestParam("id") Long id){
        User user = userService.getById(id);
        return ResResult.okResult(user);
    }

请求

axios.all([
  axios.get('http://localhost:8080/get/getAll'),
  axios.get('http://localhost:8080/get/get',{params:{id:'1'}})
]).then(res=>{
  //返回的是数组,请求成功返回的数组
  console.log(res[0].data.data),
  console.log(res[1].data.data)
}).catch(err=>{
  console.log(err)
})

方式2:使用spread方法处理返回的数组

<script>
    axios.all([
        axios.get('http://localhost:8080/get/getAll'),
        axios.get('http://localhost:8080/get/get',{params:{id:'1'}})
    ]).then(
        axios.spread((res1,res2)=>{
            console.log(res1.data.data),
            console.log(res2.data.data)
        })
    ).catch(err=>{
        console.log(err)
    })
</script>


四、axios全局配置

axios.defaults.baseURL='http://localhost:8080'; //全局配置属性
axios.defaults.timeout=5000; //设置超时时间

//发送请求
axios.get('get/getAll').then(res=>{
  console.log(res.data.data)
});

axios.post('post/getAll').then(res=>{
  console.log(res.data.data)
});


五、axios实例

//创建实例
let request = axios.create({
  baseURL:'http://localhost:8080',
  timeout:5000
});
//使用实例
request({
  url:'get/getAll'
}).then(res=>{
  console.log(res.data.data)
});

request({
  url:'post/getAll',
  method:'post'
}).then(res=>{
  console.log(res.data.data)
})


【Vue3+TypeScript】CRM系统项目搭建之 — Axiox 网络请求封装(二):https://developer.aliyun.com/article/1556821

目录
打赏
0
0
0
0
8
分享
相关文章
一夜获千星!已获 1.7k+,Art Design Pro:Vue3 + Vite + TypeScript 打造的高颜值管理系统模板,这个让后端小哥直呼救命的后台系统
Art Design Pro 是一款基于 Vue 3、Vite 和 TypeScript 的高颜值后台管理系统模板,已获 1.7k+ 星标。项目专注于用户体验与视觉设计,支持主题切换、多语言、权限管理及图表展示等功能,内置常用业务组件,便于快速搭建现代化管理界面。其技术栈先进,开发体验流畅,适配多设备,满足企业级应用需求。项目地址:[GitHub](https://github.com/Daymychen/art-design-pro)。
268 11
jsp CRM客户管理系统(含数据库脚本以及文档)
jsp CRM客户管理系统(含数据库脚本以及文档)
85 10
Gzm Design:开源神器!用 Vue3、Vite4、TypeScript 革新海报设计,免费开源的海报设计器,主流技术打造,轻松高效
海报设计在各个领域都有着广泛的应用,无论是商业广告、活动宣传还是个人创意表达。今天要给大家介绍一款免费开源的海报设计器——Gzm Design,它基于最新的主流技术开发,为用户提供了丰富的功能,让海报设计变得轻松又高效。
300 64
Vue Amazing UI 组件库(Vue3+TypeScript+Vite 等最新技术栈开发)
Vue Amazing UI 是一个基于 Vue 3、TypeScript、Vite 等最新技术栈开发构建的现代化组件库,包含丰富的 UI 组件和常用工具函数,并且持续不断维护更新中。另外,组件库全量使用 TypeScript,支持自动按需引入和 Tree Shaking 等,能够显著提升开发效率,降低开发成本。
348 5
Vue Amazing UI 组件库(Vue3+TypeScript+Vite 等最新技术栈开发)
国产CRM品牌巡礼:系统品牌的核心优势与特色
本文深度解析国产CRM系统的四大知名品牌:销售易、神州云动、销帮帮和天衣云。 销售易:中国领先的CRM解决方案提供商,提供全渠道获客、智能化销售流程及AIGC技术应用,赢得500强企业信赖。 神州云动:以PaaS+SaaS模式、灵活定制和行业解决方案著称,支持企业实现客户关系管理的数字化和智能化。 销帮帮:面向中小企业的实用型CRM系统,提供销售跟踪、客户视图等功能,提高销售效率和客户满意度。 天衣云:专注于云端部署,提供快速部署、高安全性的CRM解决方案,确保企业信息安全。 各品牌各有特色,企业应根据自身需求选择合适的CRM系统,以实现客户关系的全面管理,提升业务效率和客户满意度。
CRM系统源码|客户管理系统源码开发
CRM系统通过提供个性化的用户体验、提高生产力、改善客户体验和增加销售额来助力企业成长。集成CRM能自动化数据输入,减少管理时间,提高销售代表的效率。此外,CRM还能增强客户互动,降低跳出率,增加透明度,确保整个公司的协调合作。
266 5
电话机器人源码-智能ai系统-freeswitch-smartivr呼叫中心-crm
电话机器人源码-智能ai系统-freeswitch-smartivr呼叫中心-crm
357 0
网络安全与信息安全:知识分享####
【10月更文挑战第21天】 随着数字化时代的快速发展,网络安全和信息安全已成为个人和企业不可忽视的关键问题。本文将探讨网络安全漏洞、加密技术以及安全意识的重要性,并提供一些实用的建议,帮助读者提高自身的网络安全防护能力。 ####
180 17

热门文章

最新文章

AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等

登录插画

登录以查看您的控制台资源

管理云资源
状态一览
快捷访问