封装FetchAPI，要求超时报错的同时，取消执行promise，而不是继续执行

pedding.js

import $store from "store";

let num = 0
export default function(value, time = 20000) {
  if (typeof value === "function") {
  	++num;
    const callback = () => value("api timeout")
    $store.state.pedding[num] = callback
    setTimeout(callback, time)  // 设置超时时间
    return num;
  } else {
    delete $store.state.pedding[value]
  }
}

FetchAPI.js

import setPedding from "./pedding";

function FetchAPI(url, params, method) {
  const { signal, abort } = new AborController();
  const loadnum = setPedding(abort)
  return fetch(url, {
    signal,
    method,
    body: method === "get" ? null : JSON.stringify(params),
    // body: method === "get" ? null : Object.entries(bodyParams).map(([k, v]) => `${k}=${v}`).join("&"),
    headers: {
      "Content-Type": "application/json",
      // "Content-Type": "application/x-www-form-urlencoded",
      token: "xxxxxxx",
      loadnum
    }
  }).then(r => {
    setPedding(r.headers.loadnum)
    return r.json()
  }).catch(e => {
    setPedding(e.headers.loadnum)
    if (e.name === "AbortError") console.log("中止节点");
    else console.log("其他失败")
  })
}

export const get = (url, params) => {
  return new Promise((resovle, reject) => {
    url = url + "?" + Object.entries(params).map(([k, v]) => `${k}=${v}`).join("&")
    FetchAPI(url, null, 'get').then(
      res => resolve(res.data),
      err => (err.name !== "api timeout") && reject(err)
    )
  })
}
export const post = (url, params) => {
  return new Promise((resovle, reject) => {
    FetchAPI(url, params, 'post').then(
      res => resolve(res.data),
      err => (err.name !== "api timeout") && reject(err)
    )
  })
}

XhrAPI.js

import setPedding from "./pedding";

function XhrAPI(url, params, method) {
  const { method, body, headers } = getHeaderBody(params)
  const xhr = new XMLHttpRequest()
  xhr.open(method, url, true);
  xhr.onreadystatechange = function() {
    setPedding(xhr.headers.loadnum)
    if (xhr.readyState === XMLHttpRequest.UNSENT) {
      if (status === 0) {
        // 请求被取消
      }
    } else if (xhr.readyState === XMLHttpRequest.DONE) {
      var status = xhr.status
      if (status === 0 || (status >= 200 && status < 400)) {
        // 请求成功
      } else {
        // 处理错误
      }
    }
  }
 
  const loadnum = setPedding(xhr.abort)
  Object.entries({
    "Content-Type": "application/json",
    token: "xxxxxxx",
    loadnum
  }).forEach(([k, v]) => xhr.setRequestHeader(k, v))
  xhr.send(params)
}

export const get = (url, params) => {
  return new Promise((resovle, reject) => {
    url = url + "?" + Object.entries(params).map(([k, v]) => `${k}=${v}`).join("&")
    XhrAPI(url, null, 'get').then(
      res => resolve(res.data),
      err => (err.name !== "api timeout") && reject(err)
    )
  })
}
export const post = (url, params) => {
  return new Promise((resovle, reject) => {
    params = JSON.stringify(params)
    // "Content-Type": "application/x-www-form-urlencoded",
    // JSON.stringify(Object.entries(bodyParams).map(([k, v]) => `${k}=${v}`).join("&"))
    XhrAPI(url, params, 'post').then(
      res => resolve(res.data),
      err => (err.name !== "api timeout") && reject(err)
    )
  })
}

axiosAPI.js

import Axios from "axios";
import setPedding from "./pedding";

const Instance = Axios.create({
  timeout: 20000,
  baseURL: "",
});
// Instance.defaults.baseURL = "/";

const myInstance = Instance.interceptors.request.use((config) => {
  // 发送请求前设置
  const sour = Axios.CancelToken.source();
  config.cancelToken = sour.token;
  const loadnum = setPedding(sour.cancel)
  config.headers.loadnum = loadnum
  config.headers.token = "xxxxxxx"
  config.headers["Content-Type"]: "application/json"
  return config;
}, err => {
  // 请求错误处理
  return Promise.reject(err)
})

// Instance.interceptors.request.eject(myInstance)  // 清除myInstance拦截器
// Instance.interceptors.request.clear()  // 清除所有拦截器

Instance.interceptors.response.use((res) => {
  // 成功响应处理
  setPedding(res.headers.loadnum)
  return res
}, err => {
  // 响应错误处理
  setPedding(err.headers.loadnum)
  return Promise.reject(err)
})


export const post = (url, data) => {
  return new Promise((resolve, reject) => {
    Instance.post(url, data).then(
      res => resolve(res.data),
      err => (err.name !== "api timeout") && reject(err)
    )
  })
}
export const get = (url, data) => {
  return new Promise((resolve, reject) => {
    Instance.get(url, { params: data }).then(
      res => resolve(res.data),
      err => (err.name !== "api timeout") && reject(err)
    )
  })
}