Vue 接口请求详解

一、基本介绍

在之前的文章已经具体介绍了如何通过封装 Axios 请求接口，本篇主要讲解一下接口传参中需要注意的一些问题。如果你还没看过之前的文章，可以先回顾一下: Axios二次封装。

废话不多说，下面我们直奔主题。

我们都知道接口请求最基本的就是两种就是 Get 和 Post。两种请求方式最直观的就是前者是将参数拼在 URL 中，如： http://localhost:8080?id=1 。对于敏感数据显然这么做是不合理的，而 Post 是将参数封装在请求体中，一定程度上避免了数据泄露问题。

接下来我们了解一下 Axios 是如何发起请求的。

二、Axios传参

我们先看一下 Axios 请求方法的格式，主要有以下两种：

export function <function name> (params) {
  return request({
    url: '<request url>',
    method: 'type',
    data: params
  })
}

export function <function name> (params) {
  return request({
    url: '<request url>',
    method: '<type>',
    params: params
  })
}

在上述两中请求方式中最大的区别在于传参通过 data 方式还是 params，前者是将参数通过请求体进行发送，后者则是将参数自动拼接在 URL 中。

如果用 data 进行传参，通常前端传输一个 Json 实体类到后端，后端通过 @RequestBody 注解进行接收。如果用 params 进行传参，后端无需任何注解。

需要注意 params 方法进行请求即使传入单个值也必须构造成对象传入。

const object = {
  id: '123'
}
list(object).then(res => {
  console.log(res.data)
})

三、Get请求

1. 后端接口

当接口参数未添加注解时参数允许传入空值，若使用 @RequestParam 则参数不能为空，若需为空需设定 require=false 。

@GetMapping("/get")
public User get(@RequestParam(name = "id") String id) {
    // do something
}

@GetMapping("/get2")
public User get2(@RequestParam(value = "id", required = false) String id) {
    // do something
}

2. 前端请求

(1) 方式一

需要注意拼接变量名必须和后端接口中 @RequestParam 定义的变量名一致，否则无法接收到参数。

export function get(params) {
    return request({
        url: `/users/get?id=${params}`,
        method: 'get'
    })
}

接口请求调用代码如下：

methods: {
    getUser() {
        get('123').then(res =>{
          console.log(res.data)
        })
    }
}

(2) 方式二

通过拼接参数虽能达到预期结果但如果需要传入多个参数时显然一一手动拼接并不合适，因此 Axios 通过指定 params 方式实现自动拼接，接口参数只需传入一个对象即可。

export function get(params) {
    return request({
        url: '/users/get',
        method: 'get',
        params: params      // 指定传输方式
    })
}

接口请求调用代码如下：

methods: {
    getUser() {
        const _obj = {
            id: '123'
        }
        get(_obj).then(res =>{
            console.log(res.data)
        })
    }
}

三、Post请求

1. 后端接口

当传输的参数为 bean 对象时，后端通常配置 @RequestBody 使用。

@PostMapping("/add")
public int add(@RequestBody User user){
    // do something

}

2. 前端请求

封装的请求如下，需要注意传输方式指定为 data 。

export function add(params) {
    return request({
        url: '/users/add',
        method: 'post',
        data: params
    })
}

方法调用如下：

methods: {
  addUser() {
    const user = {
      id: '123',
      name: 'Alex'
    }
    add(user).then(res =>{
      console.log(res.data)
    })
  }
}