react二次封装

先在src下创建一个utils文件一次封装下载npm install axios在utils文件创建个request.jsimport axios from axios; // 创建axios实例 const instance axios.create({ timeout: 10000, headers: { Content-Type: application/json }, baseURL: https://zzgoodqc.cn/ }); // 请求拦截器 instance.interceptors.request.use( config { // 如果是FormData删掉默认的Content-Type让axios自动处理 if (config.data instanceof FormData) { delete config.headers[Content-Type]; } return config; }, error { return Promise.reject(error); } ); // 响应拦截器 instance.interceptors.response.use( response { return response.data; }, error { return Promise.reject(error); } ); // 封装POST请求 export const post (url, data) { return instance.post(url, data); }; export const get (url, data) { return instance.get(url, data); };二次封装创建https.js 引入import { } from ./requestimport { post,} from ./request; // 渲染 export const add (query) { return new Promise((res, rej) { post(/index/index/register, query) .then((val) { res(val); }) .catch((err) { rej(err); }); });};在哪里使用就在哪里引入import { useNavigate } from react-router-dom import React, { useEffect } from react; import { add } from ./utils/https.js; function App() { const navigate useNavigate() const handleLogin () { navigate(/one) } const fetchData async () { try { const res await add(); console.log(接口返回, res); } catch (err) { console.log(请求失败, err); } }; useEffect(() { fetchData() }, []) return ( div h1登录页面/h1 button onClick{handleLogin}登录/button /div ) } export default App