react 封装API http.js/** * 网络请求配置 */ import axios from "axios"; axios.defaults.timeout = 100000; axios.defaults.baseURL = "http://127.0.0.1:8000/"; /** * http request 拦截器 */ axios.interceptors.request.use( (config) => { config.data = JSON.stringify(config.data); config.headers = { "Content-Type": "application/json", }; return config; }, (error) => { return Promise.reject(error); } ); /** * http response 拦截器 */ axios.interceptors.response.use( (response) => { if (response.data.errCode === 2) { console.log("过期"); } return response; }, (error) => { console.log("请求出错：", error); } ); /** * 封装get方法 * @param url 请求url * @param params 请求参数 * @returns {Promise} */ export function get(url, params = {}) { return new Promise((resolve, reject) => { axios.get(url, { params: params, }).then((response) => { landing(url, params, response.data); resolve(response.data); }) .catch((error) => { reject(error); }); }); } /** * 封装post请求 * @param url * @param data * @returns {Promise} */ export function post(url, data) { return new Promise((resolve, reject) => { axios.post(url, data).then( (response) => { //关闭进度条 resolve(response.data); }, (err) => { reject(err); } ); }); } /** * 封装patch请求 * @param url * @param data * @returns {Promise} */ export function patch(url, data = {}) { return new Promise((resolve, reject) => { axios.patch(url, data).then( (response) => { resolve(response.data); }, (err) => { msag(err); reject(err); } ); }); } /** * 封装put请求 * @param url * @param data * @returns {Promise} */ export function put(url, data = {}) { return new Promise((resolve, reject) => { axios.put(url, data).then( (response) => { resolve(response.data); }, (err) => { msag(err); reject(err); } ); }); } //统一接口处理，返回数据 export default function (fecth, url, param) { let _data = ""; return new Promise((resolve, reject) => { switch (fecth) { case "get": console.log("begin a get request,and url:", url); get(url, param) .then(function (response) { resolve(response); }) .catch(function (error) { console.log("get request GET failed.", error); reject(error); }); break; case "post": post(url, param) .then(function (response) { resolve(response); }) .catch(function (error) { console.log("get request POST failed.", error); reject(error); }); break; default: break; } }); } //失败提示 function msag(err) { if (err && err.response) { switch (err.response.status) { case 400: alert(err.response.data.error.details); break; case 401: alert("未授权，请登录"); break; case 403: alert("拒绝访问"); break; case 404: alert("请求地址出错"); break; case 408: alert("请求超时"); break; case 500: alert("服务器内部错误"); break; case 501: alert("服务未实现"); break; case 502: alert("网关错误"); break; case 503: alert("服务不可用"); break; case 504: alert("网关超时"); break; case 505: alert("HTTP版本不受支持"); break; default: } } } /** * 查看返回的数据 * @param url * @param params * @param data */ function landing(url, params, data) { if (data.code === -1) { } } api.jsimport http from './http'; /** * 获取首页列表 */ function login(data) { return http("post", '/login/',data); } export { login }

react页面滚动监控(hooks,componentDidMount) componentDidMount声明周期版本import React, { Component } from 'react' interface Props { } interface State { } export default class index extends Component<Props, State> { state = {} render() { return ( <div> </div> ) } componentDidMount(){ window.addEventListener('scroll', this.handleScroll); } handleScroll(){ console.log(window.scrollY) } } hooks版本 import React, { ReactElement, useEffect } from 'react' import './index.css' interface Props { } export default function Main({ }: Props): ReactElement { const [windowSize, setWindowSize] = React.useState({ width: 0, height: 0 }) const windowChange = () => { const width = window.scrollX const height = window.scrollY setWindowSize({ width, height }) console.log(height) } useEffect(() => { windowChange() window.addEventListener('scroll', windowChange) return () => { window.removeEventListener('scroll', windowChange) } }, []) return ( <div className='maindiv'> Main </div> ) }