能否支持axios

[chenshuai2144]

自己改下生成的路径就行了，不兼容的封装一下。

我们这边默认的网络请求库就是封装过的 axios

[Hexi1997]

新项目中重新试了一下，是我之前没有想通，axios的request应该是要封装一下

request.ts

import axios, { AxiosRequestConfig } from 'axios';
import { BASE_URL } from 'gatsby-env-variables';

const instance = axios.create({
  baseURL: BASE_URL,
  headers: {
    'Content-Type': 'application/json'
  },
  timeout: 30000
});

instance.interceptors.response.use((response) => {
  // data解构
  if (response.data) {
    // eslint-disable-next-line @typescript-eslint/no-unsafe-return
    return response.data;
  }
  return response;
});

instance.interceptors.request.use((config) => {
  // get access token from local storage and set to config.header.Authorization
  // config.headers.Authorization = localStorage.getItem('accessToken');
  return config;
});

// eslint-disable-next-line @typescript-eslint/no-explicit-any
const request = async <T = any>(
  url: string,
  options: AxiosRequestConfig & { requestType?: 'json' | 'form' } = {}
) => {
  // 兼容from data文件上传的情况
  const { requestType, ...rest } = options;
  if (requestType === 'form') {
    return await instance.request<T, T>({
      url,
      ...rest,
      headers: {
        ...(rest.headers || {}),
        'Content-Type': 'multipart/form-data'
      }
    });
  } else {
    return await instance.request<T, T>({
      url,
      ...rest
    });
  }
};

export default request;

openapi.config.ts

import { generateService } from '@umijs/openapi';

// DOC: https://petstore.swagger.io/
generateService({
  schemaPath: 'https://petstore.swagger.io/v2/swagger.json',
  serversPath: './src/services',
  requestImportStatement: `import request from '../request'`
}).catch(console.error);

[GreatAuk]

新项目中重新试了一下，是我之前没有想通，axios的request应该是要封装一下

request.ts

import axios, { AxiosRequestConfig } from 'axios';
import { BASE_URL } from 'gatsby-env-variables';

const instance = axios.create({
  baseURL: BASE_URL,
  headers: {
    'Content-Type': 'application/json'
  },
  timeout: 30000
});

instance.interceptors.response.use((response) => {
  // data解构
  if (response.data) {
    // eslint-disable-next-line @typescript-eslint/no-unsafe-return
    return response.data;
  }
  return response;
});

instance.interceptors.request.use((config) => {
  // get access token from local storage and set to config.header.Authorization
  // config.headers.Authorization = localStorage.getItem('accessToken');
  return config;
});

// eslint-disable-next-line @typescript-eslint/no-explicit-any
const request = async <T = any>(
  url: string,
  options: AxiosRequestConfig & { requestType?: 'json' | 'form' } = {}
) => {
  // 兼容from data文件上传的情况
  const { requestType, ...rest } = options;
  if (requestType === 'form') {
    return await instance.request<T, T>({
      url,
      ...rest,
      headers: {
        ...(rest.headers || {}),
        'Content-Type': 'multipart/form-data'
      }
    });
  } else {
    return await instance.request<T, T>({
      url,
      ...rest
    });
  }
};

export default request;

openapi.config.ts

import { generateService } from '@umijs/openapi';

// DOC: https://petstore.swagger.io/
generateService({
  schemaPath: 'https://petstore.swagger.io/v2/swagger.json',
  serversPath: './src/services',
  requestImportStatement: `import request from '../request'`
}).catch(console.error);

很神奇，去年有个项目，生成代码 requestType === 'form' ， axios 真正发请求时，会自动在 headers 添加 'Content-Type': 'multipart/form-data'。 最近新搭建一个项目就不行了。可能之前 axios 有兼容 requestType === 'form'?。

[Hexi1997]

应该是的，我问bing，他也有说