【前端】封装api的传参

登陆木星

已于 2023-06-01 15:50:15 修改

阅读量580

点赞数

分类专栏：前端项目文章标签：前端 javascript vue.js

于 2023-05-11 22:46:46 首次发布

本文链接：https://blog.csdn.net/weixin_51508961/article/details/129974345

版权

前端项目专栏收录该内容

14 篇文章 0 订阅

订阅专栏

文章目录

参考博客

封装样式

先在src\api\request.js中进行自定义配置axios、请求拦截和响应拦截

接口举例

// 登录接口
export function login(data) {
  console.log(data);
  return request({
    url: api + "/userLogin/login",
    method: "POST",
    data: data,
  });
}

参数特点

data【在body中】和param【在query中】都需要写出来
param也可以用$的写法
path（路径参数）直接添加到路径后面

1. 路径参数

path（路径参数）直接添加到路径后面

// 更改状态
export function getUserStatus(id, status) {
  return request({
    url: api + `/sys/user/updateStatus/` + id + `/status/` + status,
    method: "GET",
  });
}

在这里插入图片描述

路径参数和data参数

// 设置角色
export function RoleUser(id, checkedRoles) {
  return request({
    url: api + "/sys/user/grantRole/" + id,
    method: "POST",
    data: checkedRoles,
  });
}

在这里插入图片描述

2. data参数

写在body中的参数

// 添加班级
export function classAdd(data) {
  return request({
    url: moc + "/school/class",
    method: "POST",
    data: data,
  });
}

3. params参数

各个写法是可以相互转换的

1. body中

//在给定folderName路径下上传单个文件
export function uploadFile(folderName, file) {
  return request({
    url: api + "/file/upload",
    method: "POST",
    params: { folderName, file },
  });
}

在这里插入图片描述

2. 写在路径中的params参数

利用 ? 和 & 连接

// 分页查询全部新闻
export function getAllNews(pageNum, pageSize) {
  return request({
    url: moc + `/news/list?pageNum=${pageNum}&pageSize=${pageSize}`,
    method: "get",
  });
}

在这里插入图片描述

3. get方法默认是params参数

// 分页查询全部班级
// GET方法的分页查询要用params
// POST方法的分页查询要用data
export function getClassList(queryParams) {
  return request({
    url: moc + "/school/class/list",
    method: "get",
    params: queryParams,
  });
}

在这里插入图片描述

4. 需要额外的参数

1. 下载指定格式

一定要加上responseType: “blob”,

// 下载
export function downFile(folderName, fileName) {
  return request({
    url: api + "/file/down",
    method: "GET",
    params: { folderName, fileName },
    responseType: "blob",
  });
}