React + 项目(从基础到实战) -- 第八期

ajax 请求的搭建

  1. 引入mock
  2. AP接口设计
  3. AJAX 通讯

前置知识

  • HTTP 协议 , 前后端通讯的桥梁
  • API : XMLHttpRequest 和 fetch
  • 常用工具axios

mock 引入

Mock.js (mockjs.com)

使用 mockJS

  1. 前端代码中引入 mockJs
  2. 定义要模拟的路由 , 返回结果
  3. mockJs 劫持ajax请求(返回模拟的结果)
import Mock from 'mockjs'Mock.mock('/api/test', 'get', ()=>{return {code: 0,data: {name:"lxy text"}}})

使用fetch api 向后端发起请求

 useEffect(()=>{fetch('/api/test').then((res)=>{console.log("res = ",res)}).then((err)=>{console.log("err = ",err)})},[])

bug : 发现返回的数据不是我们模拟的
mockjs 劫持失败

在这里插入图片描述

因为mock JS 只能劫持XMLHttpRequest

使用axios(要先安装哦) axios中文文档|axios中文网 | axios (axios-js.com)

  axios.get('/api/test').then(function (response) {console.log(response.data.data);}).catch(function (error) {console.log(error);});

成功

在这里插入图片描述

总结

  1. 只能劫持XMLHttpRequest 不能劫持fetch ,有局限性
  2. 注意线上环境要注释掉,否则线上请求也被劫持

前端项目中不建议使用 mock JS

node JS + mock JS

将mockJS 用于nodeJS服务端 , 使用它的Random能力

后端操作

  1. 初始化node 环境 npm init -y

  2. 安装mock JS

  3. 安装nodemon
    自定义启动命令
    在这里插入图片描述

  4. 安装 koa
    Koa (koajs) – 基于 Node.js 平台的下一代 web 开发框架 | Koajs 中文文档 (bootcss.com)

这里添加异步函数模拟请求响应的时间差

const Mock = require('mockjs');const Random = Mock.Random;module.exports = [{url: '/api/question/:id',method: 'get',response: () => {return {code: 200,data: {id: Random.id(),title: Random.ctitle()}}}},{url: '/api/question',method: 'post',response: () => {return {code: 200,data: {id: Random.id(),name: Random.cname(),}}}}]
  const Koa = require('koa');const Router = require('koa-router');const mockList = require('./mock/index');const app = new Koa();const router = new Router();//定义异步函数async function getRes(fn) {return new Promise(resolve => {setTimeout(() => {const res= fn()resolve(res)}, 2000)})}//注册 mock 路由mockList.forEach(item => {const {url , method , response} = item;router[method](url, async ctx => {// const res=response();//模拟网络请求的加载状态, 2Sconst res = await getRes(response);ctx.body = res;})})app.use(router.routes());app.listen(3001) // 监听的端口号

启动成功

localhost:3001/api/question/12

在这里插入图片描述

前端操作

  useEffect(()=>{// 跨域// > 前端地址:http://localhost:3000// > 后端地址:http://localhost:3001fetch('http://localhost:3001/api/test').then((res)=>{console.log("res = ",res)}).then((err)=>{console.log("err = ",err)})},[])

跨域
前端地址:http://localhost:5173
后端地址:http://localhost:3001

解决vite的跨域问题_vite解决跨域-CSDN博客

发现还是报错

在后端改

在这里插入图片描述

在线mock平台

fast-mock y-api swagger

API 设计

用户API

  1. 登录
  2. 注册
  3. 获取用户信息

问卷api

  1. 创建问卷
  2. 获取单个问卷
  3. 更新问卷
  4. 删除问卷
  5. 查询问卷
  6. 复制问卷

使用Restful API

method: ,
path: ,
request body: ,
responde: ,

用户验证

JWT

统一返回格式

errno , data ,msg

实战

配置axios 基本功能

  1. 创建axios实例
  2. 配置全局的拦截器
import { message } from "antd";import axios from "axios";//1.创建实例const instance = axios.create({baseURL: 'http://localhost:3001/api/',timeout: 1000,//等待一秒headers: {'X-Custom-Header': 'foobar'}});//2.添加请求拦截器instance.interceptors.request.use(function () {// 在发送请求之前做些什么console.log("我要发请求啦");}, function () {// 对请求错误做些什么console.log("请求错误啦");});//3.添加响应拦截器instance.interceptors.response.use(function (res) {// 2xx 范围内的状态码都会触发该函数。// 对响应数据做点什么console.log("我收到响应啦");const resData = (res.data || {}) as ResType;const {errno,data,msg} = resData;if(errno !== 0){message.error(msg || "未知错误");}return data as any;}, function () {// 超出 2xx 范围的状态码都会触发该函数。// 对响应错误做点什么console.log("响应错误啦");});//定义类型type ResType={errno:number,data?:ResDataType,msg?:string}type ResDataType={[keu:string]: any //可以有任意值,只要key键是string类型}export default instance ;

模拟axios请求

请求函数

import axios , {ResDataType} from "./axios"//获取单个问卷export async function getQuestinService(id: string): Promise<ResDataType>{const url=`/question/${id}`const data = ( await axios.get(url) ) as ResDataType;return data;}

使用

import React,{FC,useEffect} from 'react'import {useParams} from 'react-router-dom';//导入发起请求的函数import { getQuestinService } from '../../../services/question';const Edit : FC = ()=>{//获取携带的参数const {id = ''} = useParams();useEffect(()=>{getQuestinService(id);},[])return (<><h1>edit  {id}</h1>{/* http://localhost:5173/question/edit/20 */}</>)}export default Edit;

报错
TypeError: Cannot read properties of undefined (reading ‘cancelToken’)
TypeError: Cannot read properties of undefined (reading ‘cancelToken‘)_cannot read properties of undefined (reading 'canc-CSDN博客

又报错

message: ‘timeout of 1000ms exceeded’

原来是前端设置了等待一秒,改一下

timeout: 1000 * 10,//等待10秒

页面添加loading效果

自定义

function useLoadQuestionData() {const {id = ''} =useParams()const [loading,setLoading] = useState(true)const [questionData,setQuestionData] = useState({})useEffect(()=>{async function fn(){const data = await getQuestinService(id)setQuestionData(data)setLoading(false)}fn()},[])return {loading,questionData}}

使用ahooks中的useRequest

  async function load(){const data = await getQuestinService(id)return data;}const {loading,data,error} =useRequest(load)return {loading,data,error}

useRequest 与 自定义发请求

自定义请求

  const[questionList,setQuestionList] = useState([])const [total ,setTotal] =useState(0)useEffect(()=>{async function fn(){//问卷列表数据模拟const data= await getQuestinListService()const {list=[],total=0} =datasetQuestionList(list)setTotal(total)}fn()},[])

使用useRequest

 const {data={},loading} = useRequest(getQuestinListService)const {list=[],total=0} = data

列表增加搜索hook

向后端发起请求的接口

//获取(搜索)问卷列表export async function getQuestinListService(opt:Partial<SearchType>): Promise<ResDataType>{const url='/question'const data = ( await axios.get(url,{params:opt}) ) as ResDataType;return data;}

在这里插入图片描述

自定义hook

import {LIST_SEARCH_PARAM_KEY} from "../constant/index";import {  useSearchParams } from "react-router-dom";import { useRequest } from "ahooks";//导入发起请求的函数import { getQuestinListService } from "../services/question";function useLoadQuestionData() {const [searchParams] = useSearchParams();async function load(){const keyword=searchParams.get(LIST_SEARCH_PARAM_KEY) || " "const data = await getQuestinListService({keyword});return data;}const {loading,data,error} =useRequest(load,{refreshDeps:[searchParams],//刷新的依赖项})return {loading,data,error}}export default useLoadQuestionData;

使用自定义hook重构list,Star,Trash页面,向后端发请求

发现星标页面并未实现真的搜索功能

在这里插入图片描述

因为后端是随机生成的

在这里插入图片描述

解决

在这里插入图片描述

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/312914.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【读论文】【泛读】三篇生成式自动驾驶场景生成: Bevstreet, DisCoScene, BerfScene

文章目录 1. Street-View Image Generation from a Bird’s-Eye View Layout1.1 Problem introduction1.2 Why1.3 How1.4 My takeaway 2. DisCoScene: Spatially Disentangled Generative Radiance Fields for Controllable 3D-aware Scene Synthesis2.1 What2.2 Why2.3 How2.4…

C++进阶(2)-函数

目录 一、函数提高 1.1函数默认参数 1.2函数占位参数 1.3函数重载 1.3.1函数重载概述 1.3.2函数重载注意事项 二、类和对象 2.1封装 2.1.1封装的意义 2.1.2struct和class区别 2.1.3成员属性设置为私有 2.1.4封装案例 2.2对象的初始化和清理 2.2.1构造函数和析构函数 …

van-uploader 在app内嵌的webview中的一些坑

问题&#xff1a; 部分版本在ios 中没有问题&#xff0c;但是安卓中不触发图片选择和拍照&#xff08;之前是可以的&#xff0c;可能是没有锁定版本&#xff0c;重新发版导致的&#xff09;。在ios中下拉文案是英文&#xff0c;html配置lang等于 zh 也没有用&#xff0c;ios里…

Learn SRP 02

3.Editor Rendering 3.1Drawing Legacy Shaders 因为我们的管线只支持无光照的着色过程&#xff0c;使用其他不同的着色过程的对象是不能被渲染的&#xff0c;他们被标记为不可见。尽管这是正确的&#xff0c;但是它还是隐藏了场景中一些使用错误着色器的对象。所以让我们来渲…

libftdi1学习笔记 5 - SPI Nor Flash

目录 1. 初始化 2. CS控制例子 3. 读ID 3.1 制造商 3.2 容量大小 3.3 设置IO类型 3.3.1 setQSPIWinbond 3.3.2 setQSPIMxic 3.3.3 setQSPIMicrochip 3.3.4 setQSPIMicron 4. 写保护 5. 等待空闲 6. 擦除扇区 7. 页编程 8. 页读 9. 写 10. 读 11. 验证 基于M…

Postman之版本信息查看

Postman之版本信息查看 一、为何需要查看版本信息&#xff1f;二、查看Postman的版本信息的步骤 一、为何需要查看版本信息&#xff1f; 不同的版本之间可能存在功能和界面的差异。 二、查看Postman的版本信息的步骤 1、打开 Postman 2、打开设置项 点击页面右上角的 “Set…

Xshell无法输入命令输入命令卡顿

Xshell是一款功能强大的终端模拟软件&#xff0c;可以让用户通过SSH、Telnet、Rlogin、SFTP等协议远程连接到Linux、Unix、Windows等服务器。然而&#xff0c;在使用Xshell的过程中&#xff0c;我们可能会遇到一些问题。比如输入不了命令&#xff0c;或者输入命令很卡。这些问题…

content-type对数据采集的影响,猿人学58题

在拿猿人学网站 https://www.python-spider.com/api/challenge58 练习的时候发现请求头中少了 content-type之后结果全部不对了 当我设置headers如下时 headers {# accept: application/json, text/javascript, */*; q0.01,content-type: application/x-www-form-urlencode…

445. 两数相加 II

给你两个 非空 链表来代表两个非负整数。数字最高位位于链表开始位置。它们的每个节点只存储一位数字。将这两数相加会返回一个新的链表。 你可以假设除了数字 0 之外&#xff0c;这两个数字都不会以零开头。 示例1&#xff1a; 输入&#xff1a;l1 [7,2,4,3], l2 [5,6,4]…

2024腾讯一道笔试题--大小写字母移动

题目&#x1f357; 有一个字符数组,其中只有大写字母和小写字母,将小写字母移到前面, 大写字符移到后面,保持小写字母本身的顺序不变,大写字母本身的顺序不变, 注意,不要分配新的数组.(如:wCelOlME,变为wellCOME). 思路分析&#x1f357; 类似于冒泡排序&#xff0c;两两比较…

基于SpringBoot+Vue的疾病防控系统设计与实现(源码+文档+包运行)

一.系统概述 在如今社会上&#xff0c;关于信息上面的处理&#xff0c;没有任何一个企业或者个人会忽视&#xff0c;如何让信息急速传递&#xff0c;并且归档储存查询&#xff0c;采用之前的纸张记录模式已经不符合当前使用要求了。所以&#xff0c;对疾病防控信息管理的提升&a…

snort安装和使用

win10 x64安装snort 下载snort https://www.snort.org/downloads 下载npcap 0.9984版本 https://npcap.com/dist/ 安装npcap ,snort 安装成功 如果使用npcap版本不对或者使用winpcap会出现错误,winpcap不在win10运行。 snort.conf #-----------------------------------…

多ip证书实现多个ip地址https加密

在互联网快速发展的现在&#xff0c;很多用户会使用由正规数字证书颁发机构颁发的数字证书&#xff0c;其中IP数字证书就是只有公网IP地址网站的用户用来维护网站安全的手段。由于域名网站比较方便记忆&#xff0c;只有公网IP地址的网站是很少的&#xff0c;相应的IP数字证书产…

Python 入门指南(一)

原文&#xff1a;zh.annas-archive.org/md5/97bc15629f1b51a0671040c56db61b92 译者&#xff1a;飞龙 协议&#xff1a;CC BY-NC-SA 4.0 前言 这个学习路径帮助你在 Python 的世界中感到舒适。它从对 Python 的全面和实用的介绍开始。你将很快开始在学习路径的第一部分编写程序…

5. Mysql的binlog介绍

参考&#xff1a;InnoDB学习&#xff08;三&#xff09;之BinLog 1. BinLog介绍 BinLog又称为二进制日志&#xff0c;是MySQL服务层的数据日志&#xff0c;MySQL所有的存储引擎都支持BinLog。 BinLog记录了MySQL中的数据更新和可能导致数据更新的事件&#xff0c;可以用于主从…

逆向案例二十七——某笔网登录接口非对称加密算法RSA,涉及全扣代码,浏览器断点调试,和补环境

网址&#xff1a;aHR0cHM6Ly93d3cuZmVuYmkuY29tL3BhZ2UvaG9tZQ 点击账号密码登录&#xff0c;找到登陆的包&#xff0c;发现password进行了加密。 顿时&#xff0c;老生常谈&#xff0c;开始搜索&#xff0c;找到最有嫌疑的加密代码。进行搜索&#xff0c;进入js文件后&#x…

HarmonyOS开发实例:【任务延时调度】

介绍 本示例使用[ohos.WorkSchedulerExtensionAbility] 、[ohos.net.http]、[ohos.notification] 、[ohos.bundle]、[ohos.fileio] 等接口&#xff0c;实现了设置后台任务、下载更新包 、保存更新包、发送通知 、安装更新包实现升级的功能。 效果预览 使用说明 安装本应用之…

OpenHarmony南向开发案例【智慧中控面板(基于 Bearpi-Micro)】

1 开发环境搭建 【从0开始搭建开发环境】【快速搭建开发环境】 参考鸿蒙开发指导文档&#xff1a;gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md点击或复制转到。 【注意】&#xff1a;快速上手教程第六步出拉取代码时需要修改代码仓库地址 在MobaXterm中输入…

vue3 vueUse 连接蓝牙

目录 vueuse安装&#xff1a; useBluetooth: 调用蓝牙API 扫描周期设备 选择设备配对 连接成功 vue3的网页项目连接电脑或者手机上的蓝牙设备&#xff0c;使用vueUse库&#xff0c;可以快速检查连接蓝牙设备。 vueUse库使用参考&#xff1a; VueUse工具库 常用api-CSDN…

Re65:读论文 GPT-3 Language Models are Few-Shot Learners

诸神缄默不语-个人CSDN博文目录 诸神缄默不语的论文阅读笔记和分类 论文全名&#xff1a;Language Models are Few-Shot Learners ArXiv网址&#xff1a;https://arxiv.org/abs/2005.14165 2020 NeurIPS&#xff1a;https://papers.nips.cc/paper/2020/hash/1457c0d6bfcb49674…