常用的数据交互方式？

一、Ajax

export default async function Request(url = '', method='GET', data={}) {
   // 1. 创建连接
   const xhr = new XMLHttpRequest()
   // 2. 连接服务器
   xhr.open(method, url, true)
   // 3. 发送请求
   xhr.send(null);
   // 4. 接受请求
   xhr.onreadystatechange = function () {
      // readyState 为 XMLHttpRequest 的状态：0:请求未初始化 1:服务器连接已建立 2: 请求已接收 3: 请求处理中 4:请求已完成
      if (xhr.readyState === 4) {
         // status 200 为 ok，404 未找到页面
         if (xhr.status === 200) {
            // 获取数据
         } else { // fail
            // 错误处理
         }
      }
   }
}

二、Fetch

export default async function request(url = '', method = 'GET', data = {}) {
   let response: any;
   if (method.toLocaleUpperCase() === 'GET') {
      // GET请求数据格式
      if (typeof data === 'object') {
         let getData = Object.keys(data)
            .map(key => `${key}=${data[key]}`)
            .join('&');
         let getUrl = `${url}?${getData}`;
         response = await fetch(getUrl, {
            method: 'GET',
         });
      }
   } else if (method.toLocaleUpperCase() === 'POST') {
      // POST请求数据格式
      let postData = new FormData();
      Object.keys(data).forEach(key => {
         postData.append(key, data[key]);
      });
      let postUrl = url;
      response = await fetch(postUrl, {
         method: 'POST',
         body: postData,
      });
   }
   // 返回结果
   try {
      let result = await response.json();
      switch (result.code) {
         case 200:
            return result;
         case 400:
            // 错误处理
            break;
         default:
            return result;
      }
   } catch (error) {
      // 错误处理
      throw error;
   } finally {
      // 返回结果
   }
}

三、axios

import axios, { AxiosRequestConfig, AxiosResponse } from 'axios';

// 实例化axios
const instance = axios.create({
   timeout: 10000,
   transformRequest: [
      function (data) {
         return data;
      },
   ],
   transformResponse: [
      function (data) {
         return JSON.parse(data);
      },
   ],
});

// 请求拦截器
instance.interceptors.request.use(
   (config: AxiosRequestConfig) => {
      const data = config.data;
      if (config.method ? .toUpperCase() === 'GET' ) {
         const getData = Object.keys(data)
            .map(key => `${key}=${data[key]}`)
            .join('&');
         config.data = getData;
      } else {
         const postData = new FormData();
         Object.keys(data).forEach(key => {
            if (typeof data[key] === 'object') {
               data[key] = JSON.stringify(data[key]);
            }
            postData.append(key, data[key]);
         });
         config.data = postData;
      }
      return config;
   },
   error => {
      return Promise.reject(error);
   },
);

// 响应拦截
instance.interceptors.response.use(
   (response: AxiosResponse) => {
      const result = response.data;
      switch (result.code) {
         case 200:
            return Promise.resolve(result.data);
         case 400:
            // 错误处理
            return Promise.resolve(false);
         default:
            return result;
      }
   },
   error => {
      return Promise.reject(error);
   },
);

// 封装GET,POST请求
export default async function Request(url = '', method = 'GET', data = {}, config = {}) {
   return new Promise((resolve, reject) => {
      instance({
         method,
         url,
         data,
         ...config,
      })
         .then(response => {
            resolve(response);
         })
         .catch(error => {
            reject(error);
         });
   });
}

四、websocket