首页
关于
留言
友联
更多
壁纸
统计
Search
1
VUE codemirror插件 设置回显对象
54 阅读
2
js前端密码校验
53 阅读
3
HTML媒体查询Demo
48 阅读
4
Vue 和element的实现table表格数据的模糊匹配搜索
36 阅读
5
python 钉钉机器人推送消息
29 阅读
默认分类
前端
后端
其他
登录
Search
标签搜索
python
React
Django
爬虫
css
2c
累计撰写
19
篇文章
累计收到
12
条评论
首页
栏目
默认分类
前端
后端
其他
页面
关于
留言
友联
壁纸
统计
搜索到
2
篇与
的结果
2022-04-28
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 }
2022年04月28日
14 阅读
0 评论
0 点赞
2022-04-28
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> ) }
2022年04月28日
13 阅读
0 评论
0 点赞