【Vue3+TypeScript】CRM系统项目搭建之 — Axiox 网络请求封装（一）-阿里云开发者社区

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

2024-07-02 52

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

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

使用 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 方式进行无参请求

接口

 @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

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

一、基本使用

1.1. GET 请求

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

1.1.2. 使用 GET 方式请求，参数值直接放在路径中

1.1.3. 使用 GET 方式请求，参数拼接在路径中

1.1.4. GET 请求的简写方式

1.2. POST 请求

二、请求失败处理

三、axios 并发请求

四、axios全局配置

五、axios实例

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

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

一、基本使用

1.1. GET 请求

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

1.1.2. 使用 GET 方式请求，参数值直接放在路径中

1.1.3. 使用 GET 方式请求，参数拼接在路径中

1.1.4. GET 请求的简写方式

1.2. POST 请求

二、请求失败处理

三、axios 并发请求

四、axios全局配置

五、axios实例

热门文章

最新文章

相关课程

相关电子书

相关实验场景