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

embedded/2024/9/23 0:32:41/

ajax 请求的搭建

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

前置知识

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

mock__13">mock 引入

Mock.js (mockjs.com)

mockJS_16">使用 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

mock_JS_106">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_310">在线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__346">配置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_463">模拟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.ppmy.cn/embedded/6415.html

相关文章

linux设备树-of_parse_phandle_with_args

linux设备树-of_parse_phandle_with_args

1.设备树实例 interrupt-controller1 { compatible "vendor,gic"; #interrupt-cells <2>; interrupt-controller; reg <0x01 0x1000>; }; deviceA { compatible "vendor,device-a"; reg <0x02 0x100>; interrupts <&interr…
阅读更多...
Spark---RDD的创建分类和基础操作算子详解

Spark---RDD的创建分类和基础操作算子详解

一、RDD的创建 原生api提供了两种创建方式&#xff0c;一种就是读取文件textFile&#xff0c;还有一种就是加载一个scala集合parallelize。当然&#xff0c;也可以通过transformation算子来创建的RDD。 //创建RDD//加载数据&#xff0c;textFile&#xff08;参数1&#xff0c;…
阅读更多...
聚观早报 | 理想L6正式发布；Meta发布Llama 3

聚观早报 | 理想L6正式发布；Meta发布Llama 3

聚观早报每日整理最值得关注的行业重点事件&#xff0c;帮助大家及时了解最新行业动态&#xff0c;每日读报&#xff0c;就读聚观365资讯简报。 整理丨Cutie 4月20日消息 理想L6正式发布 Meta发布Llama 3 比亚迪秦L内饰曝光 小米14 Ultra推送新版澎湃OS OPPO A3 Pro正式…
阅读更多...
AppBuilder升级！工作流编排正式上线！AssistantsAPI开放邀测！

AppBuilder升级！工作流编排正式上线！AssistantsAPI开放邀测！

>>【v0.5.3版本】 上线时间&#xff1a;2024/4/14 关键发版信息&#xff1a; 低代码态&#xff1a;新增工作流&#xff0c;低代码制作组件 自定义组件&#xff1a;支持用户自定义创建组件&#xff0c;并被Agent自动编排调用
 工作流框架&#xff1a;组件支持流式编排…
阅读更多...
深度学习--CNN卷积神经网络（附图）

深度学习--CNN卷积神经网络（附图）

框架 让我们先看一下CNN的框架 卷积层中后是ReLu激活函数 &#xff0c;然后是深化池&#xff0c;之后是全连接&#xff0c;最后进行Softmax进行归一化。 所以&#xff0c;我们先逐一了解一下它们各个部分 全连接层 全连接层也称感知机&#xff0c;BP神经网络 全连接层&…
阅读更多...
Delphi Firemonkey使用TVertScrollbox自定义列表数据

Delphi Firemonkey使用TVertScrollbox自定义列表数据

界面布局设置如下 创建一个过程添加新项目 procedure TForm1.AddItem(name: string; age: Integer); varlayout: TLayout; begin// 设置姓名标签的文本Label3.Text : name;// 设置年龄标签的文本Label4.Text : IntToStr(age);// 克隆 Layout1&#xff0c;并将克隆得到的对象赋值…
阅读更多...
AWS Key disabler：AWS IAM用户访问密钥安全保护工具

AWS Key disabler：AWS IAM用户访问密钥安全保护工具

关于AWS Key disabler AWS Key disabler是一款功能强大的AWS IAM用户访问密钥安全保护工具&#xff0c;该工具可以通过设置一个时间定量来禁用AWS IAM用户访问密钥&#xff0c;以此来降低旧访问密钥所带来的安全风险。 工具运行流程 AWS Key disabler本质上是一个Lambda函数&…
阅读更多...
leetcode:42.接雨水

leetcode:42.接雨水

单调栈解题思路&#xff1a; 需要知道当前遍历到的元素左边和右边第一个比该元素大的元素。 如果当前遍历到的元素大于栈顶元素&#xff0c;则该元素为栈顶元素右边第一个比它大的元素&#xff0c;此时&#xff0c;栈顶元素的栈内相邻元素是该元素左边第一个比它大的元素。【…
阅读更多...
最新文章

Copyright @ 2022~2023