axios+promise封装参考，vue架构

结构图

直接上代码

文件index.js

// An highlighted block
/**
 * @Description: api 多节点控制，支持同一个请求，短时间重复的过滤
 */
import axios from "axios";
import qs from "qs";
import md5 from "md5";//加密
import { Message } from "iview";
import Cookies from "js-cookie";
import { TOKEN_KEY } from "@/libs/util";

//发送请求的管理，同一请求在没有返回的情况下或者超时返回，不能反复请求
let requestManagement = {};

//API全局配置,不同站点，传递参数，配置都不一样，迁移到具体站的内部配置

axios.defaults.baseURL = "/all/api";//`baseURL` 将自动加在 `url` 前面，除非 `url` 是一个绝对 URL
axios.defaults.timeout = 60000;//超时
axios.defaults.withCredentials = true;
axios.defaults.headers.post["Content-Type"] =//header请求方式
  "application/x-www-form-urlencoded";
//axios.defaults.headers.post['Content-Type'] = 'application/json';
axios.defaults.transformRequest = [// 对 请求参数data 进行任意转换处理
  function(data, headers) {
    //return a string or an axios of Buffer, ArrayBuffer,FormData or Stream
    //return JSON.stringify(data);
    return qs.stringify(data);
    //return data;
  }
];

axios.defaults.transformResponse = [ // 对 返回数据data 进行任意转换处理
  function (data) {
    return data;
  },
],

//请求拦截器
axios.interceptors.request.use(
  function(config) {
    //console.log("request", config);
    config = requestUrl(config);
    return config;
  },
  function(error) {
    return Promise.reject(error);
  }
);

//返回拦截器
axios.interceptors.response.use(
  function(response) {
    //console.log("response", response);
    responseUrl(response.config);
    return response;
  },
  function(error) {
    return Promise.reject(error);
  }
);

/*
 * 拦截相同带参数的API，在第一个API没有回来前，后面都会被忽略
 */
function requestUrl(config) {
  let strData = "";
  if (config.data) {
    strData = JSON.stringify(config.data);
  }
  let requestId = md5(config.url + strData);
  if (requestManagement[requestId] && requestManagement[requestId].count > 50) {
    return Promise.reject({
      type: 1,
      msg: "请求被取消,监测该请求到短时间频繁重复请求异常情况！"
    });
  } else {
    let count = requestManagement[requestId]
      ? requestManagement[requestId].count + 1
      : 1;
    requestManagement[requestId] = { createTime: new Date(), count: count };
  }
  config.requestId = requestId;
  return config;
}

//响应后，删除请求
function responseUrl(config) {
  if (requestManagement[config.requestId]) {
    delete requestManagement[config.requestId];
  }
}

//axios请求封装
export const request = function(data) {
  return new Promise((resolve, reject) => {
    //console.log(89,data);
    axios(data)
      .then(function(response) {
        let { data } = response;
        if (data.code !== 200) {
          if (data.code === 401) {
            Cookies.remove(TOKEN_KEY);
            Message.error("没有权限,请登录后使用！");
            setTimeout(function() {
              window.location.href = "/";
            }, 2000);
            reject(data);
          } else {
            /*
            if (data.msg) {
              Message.error({
               duration: 2,
                content: data.msg
              });
            } else {
              Message.error("服务内部错误");
            }
            */
            reject(data);
          }
        } else {
          resolve(data);
        }
      })
      .catch(function(error) {
        //Message.error("服务内部错误");
        console.log("Request error:", data.url, error);
        if (error.type == 1) {
          Message.error({
            duration: 4,
            content: error.msg
          });
        } else {
          reject(error);
        }
      });
  });
};

//多个请求封装 data:[API.getA(obj),API.getB(obj)]
export const requestAll = function(data) {
  Promise.all(data)
    .then(result => {
      resolve(result);
    })
    .catch(error => {
      reject(error);
    });
};

文件app.js

// api也
import * as baseAPI from '@/api';
const request = baseAPI.request;

const API = {
  
  getAboutList: obj => {
      let requestData = {
        url: baseAPI.appInfo().api+"HQN/GetAbout",
        method: "POST",
        data: obj
			};
      return request(requestData);
  }
};
export default API;
};

文件about.vue

// 导入
import API from './api'

getAboutList() {//滚动调用
  let obj = {}；
  API.getAboutList()
	.then(res => {
    let data = res.data;
    if (res.code == 200) {
      //处理下增加状态
			this.data = data;
    } else {
      uni.showToast({
        icon: 'none',
        title: res.msg,
      });
    }
  }).catch(err => {
    console.log("getAboutList fail!" + err);
  });
},