axiosRequest

request.js

import axios from 'axios';
const { NODE_ENV } = process.env;
class AxiosRequest {
  // constructor公共的属性，不需要每次 new一下实例化
  constructor() {
    this.baseURL = (NODE_ENV === 'development') ? '' : '/';
    this.timeout = 5000; // 超时取消请求
    //       withCredentials: true, // 默认 false
    this.headers = {
      'Content-Type': 'application/json;charset=utf-8'
    }
    // this.loading = true; // toast
    this.queue = {};
  }
  request(options) {
    const config = {
      headers: this.headers,
      ...options,
      baseURL: this.baseURL,
      timeout: this.timeout,
    }
    const instance = axios.create(config);
    console.log(100, options)
    this.queue = {}; // 请求队列，可能有很多个请求
    this.setInterceptor(instance, options.url)
    return instance;
  }
  setInterceptor(instance, url) {
    console.log('instance', instance)
    // request请求拦截
    instance.interceptors.request.use(
      config => {
        // 显示 loading
        if(!Object.keys(this.queue).length) {
          this.loading = true;
        }
        // 把请求添加到队列里面
        this.queue[url] = url;
        console.log('请求拦截')
        return config;
      },
      error => {
        return Promise.reject(error);
      }
    );
    // response 响应拦截
    instance.interceptors.response.use(
      res => {
        this.removeQueue(url);
        console.log('response拦截', res)
        if(res.data.code === 0) {
          return res.data.data || [];
        }
        // 对返回的状态码，做各种异常处理
        return res;
      },
      error => {
        this.removeQueue(url);
        return Promise.reject(error);
      }
    )
  }
  // 请求成功后，从队列中删除 url
  removeQueue(url) {
    delete this.queue[url];
    // 如果队列为空，就删除 loading
    if(!Object.keys(this.queue).length) {
      this.loading = false;
    }
  }
}
export default new AxiosRequest;

index.js

import $axios from './request';
import { request } from 'umi';
export function postId(data) {
  // return request('/posts', {
  //   method: 'GET',
  // });
  // return request('/graphql', {
  //   method: 'POST',
  //   data: { "query": "query queryServices($duration: Duration!,$keyword: String!) {\n    services: getAllServices(duration: $duration, group: $keyword) {\n      key: id\n      label: name\n      group\n    }\n  }", "variables": { "duration": { "start": "2021-11-06 0242", "end": "2021-11-06 0342", "step": "MINUTE" }, "keyword": "" } }
  // })
  // return axios.post('/graphql', { "query": "query queryServices($duration: Duration!,$keyword: String!) {\n    services: getAllServices(duration: $duration, group: $keyword) {\n      key: id\n      label: name\n      group\n    }\n  }", "variables": { "duration": { "start": "2021-11-06 0242", "end": "2021-11-06 0342", "step": "MINUTE" }, "keyword": "" } },
  //   {
  //     headers: { 'Authorization': 'Basic c2t5d2Fsa2luZzpza3l3YWxraW5n' },
  //     withCredentials: true,
  //   },
  // );
  // return $axios.request('/graphql', {
  //   method: 'post',
  //   data: {
  //     'query': 'query queryGetAllTemplates {\n    getAllTemplates(includingDisabled: false) {\n      name,\n      type\n      configuration,\n      activated,\n      disabled,\n    }\n  }',
  //     'variables': {},
  //   }
  // });
  return $axios.request({
    url: '/graphql',
    method: 'post',
    data: {
      'query': 'query queryGetAllTemplates {\n    getAllTemplates(includingDisabled: false) {\n      name,\n      type\n      configuration,\n      activated,\n      disabled,\n    }\n  }',
      'variables': {},
    }
  });
}
export function queryList(data) {
  return $axios.request('/graphql', {
    method: 'post',
    data: {
      'query': 'query queryGetAllTemplates {\n    getAllTemplates(includingDisabled: false) {\n      name,\n      type\n      configuration,\n      activated,\n      disabled,\n    }\n  }',
      'variables': {},
    },
    auth: {
      username: 'skywalking',
      password: 'skywalking',
    },
  });
}