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();

        //模拟网络请求的加载状态, 2S

        const 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:3001

     fetch('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} =data

        setQuestionList(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页面,向后端发请求

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

在这里插入图片描述

因为后端是随机生成的

在这里插入图片描述

解决

在这里插入图片描述

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

记一次kafkakerberos认证问题

记一次kafkakerberos认证问题

1&#xff0c;报错信息 排查思路&#xff1a;检查kerberos配置文件 kerberos.kafka.principalkafka/huawe_baseSECURITY.COM kerberos.kafka.keytabPath/etc/huawe_base.keytab kerberos.kafka.krb5ConfPath/etc/krb5.conf但是查看kafka_client_jass.conf文件&#xff0c;发现…
阅读更多...
LoRA模型是什么？

LoRA模型是什么？

AI Agent能力评测工具AgentBench评测结果 LoRA模型是什么&#xff1f; LoRA模型&#xff08;Low-Rank Adaptation of Large Language Models&#xff09;是一种针对大型语言模型&#xff08;LLMs&#xff09;的微调技术&#xff0c;其目的是在保持模型原有性能的基础上&#x…
阅读更多...
数据库服务的运行与登录

数据库服务的运行与登录

打开数据库服务 数据库服务: SQL Server(MSSQLServer) 运行在服务器端的应用程序, 提供数据的存储 / 处理和事务等在使用DBMS的客户端之前必须首先打开该服务 客户端连接到服务器 关于客户端 / 服务器端的说明 客户端 : 数据库管理系统(DBMS), 应用程序服务器端 : 安装的数据…
阅读更多...
深澜计费管理系统 /demo/proxy存在任意文件读取漏洞

深澜计费管理系统 /demo/proxy存在任意文件读取漏洞

声明&#xff1a; 本文仅用于技术交流&#xff0c;请勿用于非法用途 由于传播、利用此文所提供的信息而造成的任何直接或者间接的后果及损失&#xff0c;均由使用者本人负责&#xff0c;文章作者不为此承担任何责任。 简介 深澜计费管理系统是一款用于网络设备计费管理的软件…
阅读更多...
nginx部署上线

nginx部署上线

1. windows配置nginx 打包命令 npm run build:prod 1. 安装 nginx mac windows 2. mac / windows 环境下ngnix部署启动项目 2. nginx 解决 history 的 404 问题 3. nginx配置代理解决生产环境跨域问题
阅读更多...
元宇宙-虚拟世界的安全风险如何应对

元宇宙-虚拟世界的安全风险如何应对

元宇宙&#xff08;Metaverse&#xff09;是一个虚拟时空间的集合&#xff0c;由一系列的增强现实&#xff08;AR&#xff09;、虚拟现实&#xff08;VR&#xff09;和互联网&#xff08;Internet&#xff09;所组成。这个虚拟时空间是一个持续存在的、由众多虚拟世界互相连接而…
阅读更多...
链表OJ - 5（合并两个有序链表）

链表OJ - 5（合并两个有序链表）

题目描述&#xff08;来源&#xff09; 将两个升序链表合并为一个新的 升序 链表并返回。新链表是通过拼接给定的两个链表的所有节点组成的。 思路 需创建一个头结点&#xff0c;然后从两个链表的表头开始依次比较传入的两个链表的结点的大小&#xff0c;并将两个链表中较小的…
阅读更多...
Linux LVM 逻辑卷管理

Linux LVM 逻辑卷管理

Logical Volume Manager&#xff0c;逻辑卷管理 能够在保持现有数据不变的情况下动态调整磁盘容量&#xff0c;从而提高磁盘管理的灵活性/boot分区用于存放引导文件&#xff0c;不能基于LVM创建 三大概念&#xff1a; 物理卷PV基于硬盘或分区设备创建而来&#xff0c;生成N多…
阅读更多...
自媒体博客Spimes主题 X7.1 简约新闻自媒体类的 typecho 主题源码

自媒体博客Spimes主题 X7.1 简约新闻自媒体类的 typecho 主题源码

spimes主题专为博客、自媒体、资讯类的网站设计开发&#xff0c;自适应兼容手机、平板设备。一款简约新闻自媒体类的 typecho 主题&#xff0c;设计上简约、干净、精致、响应式&#xff0c;后台设置更是强大而且实用的新闻自媒体类主题。 PS&#xff1a;5.0版本改动比较多&…
阅读更多...
Golang插件系统实现

Golang插件系统实现

插件可以在解耦的基础上灵活扩展应用功能&#xff0c;本文介绍了如何基于Golang标准库实现插件功能&#xff0c;帮助我们构建更灵活可扩展的应用。原文: Plugins with Go 什么是插件 简单来说&#xff0c;插件就是可以被其他软件加载的软件&#xff0c;通常用于扩展应用程序的功…
阅读更多...
数据库的特点

数据库的特点

前面讲了&#xff0c;数据库是有组织的&#xff0c;规范的把数据保存起来的。 怎么个组织的&#xff0c;规范的&#xff1f; 数据库的特点&#xff1a; 1.将数据放到数据表格&#xff08;二维表&#xff09;中&#xff0c;在将表格放到库中。 2.一个数据库中可以有多张表&am…
阅读更多...
【.Net动态Web API】背景与实现原理

【.Net动态Web API】背景与实现原理

&#x1f680;前言 本文是《.Net Core进阶编程课程》教程专栏的导航站&#xff08;点击链接&#xff0c;跳转到专栏主页&#xff0c;欢迎订阅&#xff0c;持续更新…&#xff09; 专栏介绍&#xff1a;通过源码实例来讲解Asp.Net Core进阶知识点&#xff0c;让大家完全掌握每一…
阅读更多...
分布式限流——Redis + Lua脚本实现令牌桶算法

分布式限流——Redis + Lua脚本实现令牌桶算法

主要思路概括如下&#xff1a; 定义数据结构&#xff1a; 使用Redis存储令牌桶的状态&#xff0c;包括当前令牌数&#xff08;KEYS[1]&#xff09;和上一次令牌填充的时间戳&#xff08;KEYS[1]:last&#xff09;。 计算新增令牌&#xff1a; 获取当前系统时间与上次令牌填充时…
阅读更多...
中科亿海微-CL1656功能验证开发板

中科亿海微-CL1656功能验证开发板

I. 引言 A. 研究背景与意义 CL1656是一款精度高、功耗低、成本低的5V单片低功耗运放&#xff0c;由核心互联公司研发制造&#xff0c;CL1656 是一个 16-bit、快速、低功耗逐次逼近型 ADC&#xff0c;吞吐速率高达 250 kSPS&#xff0c;并且内置低噪声、宽 带宽采样保持放大器。…
阅读更多...
Vision Pro 零基础教程：1.机器视觉概述

Vision Pro 零基础教程：1.机器视觉概述

文章目录 机器视觉简介机器视觉的发展历史机器视觉的结构组成机器视觉的应用工业相机分类1. 按传感器类型分类&#xff1a;2. 按分辨率分类&#xff1a;3. 按扫描方式分类&#xff1a;4. 按输出信号类型分类&#xff1a;5. 按应用领域分类&#xff1a;6. 按接口类型分类&#x…
阅读更多...
React【Day2】

React【Day2】

React表单控制 受控绑定 概念&#xff1a;使用React组件的状态&#xff08;useState&#xff09;控制表单的状态 双向绑定 MVVM 报错记录&#xff1a; 错误代码&#xff1a; import { useState } from "react";const App () > {const [value, setValue] useS…
阅读更多...
使用pytorch构建GAN模型的评估

使用pytorch构建GAN模型的评估

本文为此系列的第六篇对GAN的评估&#xff0c;上一篇为Controllable GAN。文中使用训练好的分类模型的部分网络提取特征将真实分布与生成分布进行对比来评估模型的好坏&#xff0c;若有不懂的无监督知识点可以看本系列第一篇。 原理 一般来说&#xff0c;我们评估模型的好坏可…
阅读更多...
DataGridView添加行号隔行变色

DataGridView添加行号隔行变色

运行效果 颜色对应关系 类实现代码 using System; using System.Collections.Generic; using System.ComponentModel; using System.Drawing; using System.Linq; using System.Text; using System.Threading.Tasks; using System.Windows.Forms;namespace WindowsFormsApp1 {…
阅读更多...
二刷大数据（二）- Spark

二刷大数据（二）- Spark

目录 SparkHadoop区别核心组件运行架构Master&WorkerApplication (Driver)Executor RDD概念yarn下工作原理算子依赖血缘关系阶段划分广播变量 shuffle流程SparkSQLDataSet、DataFrame、RDD相互转换 SparkStreaming Spark Spark是一种基于内存的快速、通用、可扩展的大数据…
阅读更多...
C# Solidworks二次开发：比较两个solidworks文档属性相关API详解

C# Solidworks二次开发：比较两个solidworks文档属性相关API详解

大家好&#xff0c;今天要讲的文章是关于如何比较两个solidworks文档。 下面是API的介绍&#xff1a; &#xff08;1&#xff09;第一个为Close&#xff0c;这个API的含义为在比较solidworks文档以后执行必要的清理。下面是官方的具体解释&#xff1a; 其没有输入参数&#x…
阅读更多...
最新文章

Copyright @ 2022~2023