标签：http 请求 RES export 参数 vue3 编写 const

vue3请求编写规范

• 使用的是模块化的组件式API界面

request (请求文件夹) 总文件夹中

1. 包含了 对应的接口文件 xxxx.ts
2. 包含了 管理最底层请求的 request.ts
3. 包含了 导出所有接口的 http.ts

底层请求

• request.ts

//引入axios请求
import axios from "axios";

const instance = axios.create({
  baseURL: "请求基础URL",
  timeout: 50000,      //请求时间
});

instance.interceptors.request.use(
  (config) => {
    //请求拦截器,当其中有逻辑需要使用return;
    return config;
  },
  (err) => Promise.reject(err)
);

 //响应拦截器;
instance.interceptors.response.use(
  (response) => {
   //响应拦截器返回出 res.data
    return response.data;
  },
  (err) => Promise.reject(err)
);

//应用请求状态
export default instance;

子级仓库页面定义

需要在仓库本页中引入请求方法

import http from "./request";

父级页面中也需要进行定义

export * as "自定义名字 from "./自定义名字文件夹";
//例
export * as product from "./product";
export * as hot from "./hot";
export * as subject from "./subject";

TS与JS请求的对比

TS与JS请求的不同就是多了类型约束

TS:

export const API_adminList = (params: IAdminListParmas): RES<IAdminListModel> =>
  http.get("admin/list", { params });

JS:

export const API_adminList = (params) =>
  http.get("admin/list", { params });

• 在此例子中可以看到,TS中多了传递参数的约束与返回值的约束

提取返回值类型约束公共部分

绝大部分的请求都会返回 三个固定参数 code data 与message ,而其中只有data是会发生类型改变的,那么我们就可以将这三个参数给封装成接口,每次使用就可以简化类型规定的过程了

1. 先需要声明全局公共请求约束文件 requestGlobal.d.ts

interface IResult<T> {
  code: number;
  data: T;
  message: string;
}

• 留下泛型T是因为只有data处于不固定的状态

type RES<T> = Promise<IResult<T>>;

• 接口 RES<> 为异步的类型约束 IResult ,使用 RES<> 来约束所有的返回值

返回值类型约束

RES<类型约束> 中的 规定约束

//例子:
interface IAttributeList {
  pageNum: number;
  pageSize: number;
  totalPage: number;
  total: number;
}

• 使用

export const 请求名 = (): RES<IAttributeList> =>
  http.get("请求地址");

GET请求

• 未携带参数

export const 请求名= (): RES<返回值类型约束> => http.get("请求地址");

• 携带参数

export const 请求名 = (参数: 参数的类型约束): RES<返回值类型约束> =>
  http.get("请求地址", { 参数 });

1. 注意: get请求中的params在传递时需要通过解构进行传参,所以要加 { } 花括号

POST请求

• 未携带参数

export const 请求名 = () => http.post("请求地址");

1. 一般作用于登出或者注销等不需要参数传递的情况
2. 无需规定参数返回值

• 携带参数

export const 请求名 = (参数: 参数的类型约束): RES<返回值类型约束> =>
  http.post("请求地址", 参数);

1. 可以看到post中的请求就不需要进行解构传参了

请求中携带参数

有时需要通过url拼接进行跳转就需要将参数写入到URL当中

export const 请求名 = (id: 参数的类型约束, status: 参数的类型约束): RES<返回值类型约束> =>
  http.post(`admin/updateStatus/userid=${id}?status=${status}`);

1. 可以看到,此时 id 与 status 是通过直接作用与自身类型约束,而不需要再从接口中导入
2. URL中拼接需要使用 ${ }

qs.stringify 的用法

• qs.stringify 是把一个参数对象格式化为一个字符串。将对象序列化成URL的形式，以&进行拼接。
• 安装 : npm install qs
• 引入: import qs from "qs";

let params = { a: '123', c: '456' };
qs.stringify(params)
 
// 结果是
'a=123&c=456'

• 在请求中使用:

export const 请求名 = (ids: 参数的类型约束): RES<返回值类型约束> =>
  http.post(`请求地址`, qs.stringify({ ids }));

标签：http,请求,RES,export,参数,vue3,编写,const
From： https://www.cnblogs.com/Dollom/p/17205228.html