利用ts泛型+Promise+async/await封装原生ajax|利用ts泛型+Promise+async/await封装原生ajax ，简单易懂，拿来即用利用ts泛型+Promise+async

话不多说直接上代码：
主要文件 MyRequest.ts

type RequestConfig = { url: string, method?: "GET" | "POST", param?: any } // 基于泛型封装一个网络请求demo export default class MyRequest { private static ROOT_URL = "https://www.baidu.com/" /** * 请求网络 * @static * @template T 指定响应实体 * @param {RequestConfig} option 请求url+参数+请求方式 * @return {*}{Promise} */ public static request(option: RequestConfig): Promise { return new Promise((resolve, reject) => { option.url = `${MyRequest.ROOT_URL }/${option.url}`; // 默认get option.method = option.method || "GET"; // 如果是get请求把参数整合到url后面 if (option.method === 'GET') this.formatUrl(option); let xhr = new XMLHttpRequest() xhr.responseType = 'json' xhr.onreadystatechange = function (e) { if (xhr.readyState === 4) { if (xhr.status !== 200) { // 可自行封装错误内容 return reject({ code: xhr.status, msg: 'request error' }) } if (xhr.response?.code !== undefined) { if (xhr.response.code === 0) { let t: T = xhr.response.data return resolve(t) } else { // 这里可以通过公共方法把异常以弹窗形式抛出如:showRequestError(xhr.response) return reject(xhr.response) } } else { return reject(xhr.response) } } } xhr.open(option.method, option.url, true) if (option.method === 'POST') { xhr.setRequestHeader('Content-Type', 'application/json') // xhr.setRequestHeader('token', '') } xhr.send(option.method === 'POST' ? JSON.stringify(option.param) : null) }); } /** * 格式化get请求url * @param {RequestConfig} option */ public static formatUrl(option: RequestConfig) { let formData = https://www.it610.com/article/[] for (let key in option.param) { formData.push(''.concat(key, '=', option.param[key])) } let formStr = formData.join('&') if (formData) option.url += option.url.indexOf('?') === -1 ? ''.concat('?', formStr) : ''.concat('&', formStr) } } // 响应数据实体,仅供测试使用 export interface ResponseDataBean { id: number; name: string; age: number; } export interface ListData { current_page: string; data: T; last_page: number; per_page: number; total: number; }

【利用ts泛型+Promise+async/await封装原生ajax|利用ts泛型+Promise+async/await封装原生ajax ，简单易懂，拿来即用】如何使用？
1.先导入对应类及对应接口，以下是我自己项目导入

import MyRequest, { ListData, ResponseDataBean } from "../config/MyRequest";

2.使用方法（响应实体在请求的时候 request 指定什么类型则返回什么类型）

getListData(); // 分页请求 getUserInfo(); // 一般请求async function getListData() { let param = { id: 1, page: 1, page_size: 30, keyword: "test", } let listData= https://www.it610.com/article/await MyRequest.request>({ url: "pathName/login", method: "POST", param: param }); console.log(listData.data); }async function getUserInfo() { let param = { userId: 1 } let generalData = https://www.it610.com/article/await MyRequest.request({ url: 'pathName/userInfo', method: "POST", param: param }); console.log(generalData.name); }