Closed Hexi1997 closed 1 year ago
新项目中重新试了一下,是我之前没有想通,axios的request应该是要封装一下
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;
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);
新项目中重新试了一下,是我之前没有想通,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'
?。
应该是的,我问bing,他也有说
自己改下生成的路径就行了,不兼容的封装一下。
我们这边默认的网络请求库就是封装过的 axios