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
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2451070.html
如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!