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

最新推荐文章于 2024-06-25 11:39:37 发布
最新推荐文章于 2024-06-25 11:39:37 发布
阅读量1k 收藏 13
点赞数 17
分类专栏： react学习 文章标签： react.js 前端 mock axios
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_73270720/article/details/137890212
版权

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

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

在这里插入图片描述

因为后端是随机生成的

在这里插入图片描述

解决

在这里插入图片描述

在这里插入图片描述

摇光93
关注
  • 17
    点赞
  • 踩
  • 13
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
react最全项目实战
01-08
该项目采用react最新技术，结合react-redux,redux-thunk等核心技术，使用axios来获取数据请求。immutable.js、redux-immutable等核心技术。
REACT实战项目从0到1搭建（仅供参考）
热门推荐
不怕麻烦的鹿丸的博客
12-06 2万+
按照。
react项目实战案例
最新发布
2401_83781937的博客
06-25 915
使用yarn add的时候可能会报上述错误，报的话可以使用npm install react-router-dom来进行安装。使用React CLI搭建项目 npx create-react-app geek-pc。​​​​​​​1）安装路由：yarn add react-router-dom。1.项目介绍：主要将学习到的项目内容进行总结（有需要项目源码的可以私信我）2）产品关键词：IT、极客、活力、科技、技术分享、前沿动态、内容社交。项目搭建：React官方脚手架 create-react-app。
react实战
weixin_51666715的博客
04-10 2511
React项目实战 [[TOC]] (一) 创建项目 npm i create-react-app -g 安装脚手架(需要node14以上) create-react-app my-app 创建项目 用vscode打开项目my-app npm start 运行项目 win7安装node14: 若安装有nvm, 先卸载 下载node14解压到c盘 右键我的电脑 => 属性 => 高级系统设置 => 环境变量 => 系统变量 => 双击Path
React实战项⽬开发完整流程含代码
qq_42696432的博客
11-17 489
学习完react后，开始react项目实战，根据实战巩固一下学的react,熟悉react代码的各个使用
React基础入门项目实战
Da_Zhuang的博客
04-05 2811
今天参加了一整天reactjs的培训，看邮件说该课程价值100美元，该课程覆盖了react的大部分基础内容，确实很不错。听说外企中使用reactjs较多，国内使用vue较多，想在外企工作的同学有必要了解该框架。写该博文主要是梳理React的基础知识点，可以对ReactJS的基础知识有大体了解。
千锋2022版React全家桶教程_react零基础入门到项目实战完整版（资料）
07-27
这个 React 全家桶教程涵盖了 React 的基础知识、React Hooks、React 路由、Redux、React-Redux、Immutable、Mobx、TS、styled-components、单元测试、Redux-saga 等知识点，是一个非常全面的 React 教程。
react-reactreactrouter40版本单页面应用实战
08-15
在这个"react-reactreactrouter40版本单页面应用实战"项目中，我们将深入探讨React Router V4的关键特性和实践方法。 1. **组件化的路由**：React Router V4的核心理念是"Just Components"，这意味着路由、路径和...
React+Native入门与实战pdf
11-17
总之，《React+Native入门与实战》这本书将带领读者深入理解React Native的原理与实践，通过实际项目案例，帮助读者掌握从零开始构建原生移动应用的技能。对于想要进入移动开发领域的JavaScript开发者来说，这是一本...
redux+react+router+node.js
09-03
在课程学习中，开发者需要具备一定的基础，包括React开发环境的搭建，如使用create-react-app创建项目，理解和使用ES6的新特性，如let和const声明变量，箭头函数，对象和数组的扩展等。此外，还要了解如何扩展...
java+《大型电商项目实战》源码.zip
08-17
通过深入学习和研究这个《大型电商项目实战》的源码，开发者不仅可以巩固Java基础知识，还能了解并掌握电商系统开发的关键技术和流程，为实际工作中的项目开发打下坚实的基础。同时，对于想要提升自己在Java开发领域...
2022最新React项目实战(React后台管理系统、TypeScript+React18)
05-12
前端乐哥前端乐哥前端乐哥前端乐哥前端乐哥前端乐哥前端乐哥前端乐哥前端乐哥前端乐哥前端乐哥前端乐哥前端乐哥前端乐哥前端乐哥前端乐哥前端乐哥前端乐哥前端乐哥前端乐哥前端乐哥前端乐哥前端乐哥前端乐哥前端乐哥前端乐哥前端乐哥前端乐哥前端乐哥前端乐哥前端乐哥前端乐哥前端乐哥前端乐哥前端乐哥前端乐哥前端乐哥前端乐哥前端乐哥前端乐哥前端乐哥前端乐哥前端乐哥前端乐哥前端乐哥前端乐哥前端乐哥前端乐哥前端乐哥前端乐哥前端乐哥前端乐哥前端乐哥前端乐哥前端乐哥前端乐哥前端乐哥前端乐哥前端乐哥前端乐哥前端乐哥前端乐哥前端乐哥前端乐哥前端乐哥前端乐哥前端乐哥前端乐哥前端乐哥前端乐哥前端乐哥前端乐哥前端乐哥前端乐哥前端乐哥前端乐哥前端乐哥前端乐哥前端乐哥前端乐哥前端乐哥前端乐哥前端乐哥前端乐哥前端乐哥前端乐哥前端乐哥前端乐哥前端乐哥前端乐哥前端乐哥前端乐哥前端乐哥前端乐哥前端乐哥前端乐哥前端乐哥前端乐哥前端乐哥前端乐哥前端乐哥前端乐哥前端乐哥前端乐哥前端乐哥前端乐哥前端乐哥前端乐哥前端乐哥前端乐哥前端乐哥前端乐哥前端乐哥前端乐哥前端乐哥前端乐哥前端乐哥前端乐哥前端乐哥前端乐哥前端乐哥前端乐哥前端乐哥前端乐哥
React项目实战(一)
k464746的博客
04-27 2万+
文章目录项目实战前的准备工作项目实战一.搭建项目的基本页面及外层路由1-1配置基本页面1-2配置路由1-3需要最外层去渲染路由视图1-4需要配置内层App路由1-5 路由的懒加载二.利用Antd实现组件2-1 使用Antd的Layout进行布局2-2 可以设计个Logo2-3 实现左侧的菜单展示2-4 实现左侧的小图标2-5 实现点击菜单切换总结需要下载的组件 项目实战前的准备工作 React基础...
超容易上手的React项目实战：小黑盒组件开发，BUG全都退！退！退！
weixin_52946191的博客
07-06 530
正好赶上Steam的夏促活动，而我一般使用小黑盒这款移动端app查看优惠（背刺）信息，于是就想着能不能自己动手使用React开发一个类似小黑盒的界面来锻炼自己组件开发的能力。
超强React项目实战，一学就会，附源码和在线链接
Web_boom的博客
08-25 1228
设计师直呼：我让你模仿没让你超越啊react中一切皆组件，开发一个功能(页面)，相当于开发一个组件。把这一个大的组件划分成一个个组件，然后逐步搭建起来。从这个页面可以看出划分的一个个组件及父子组件，在下图的文件目录架构中清晰可见。简单说明一下在分析完如何写以及搭建好我们的目录架构之后，开始进入正题。图3使用了路由懒加载，将路由组件分包，在进入其他目标页面时再加载，可提升首页加载速度。为了方便，我这里设置了主界面是体育/赛事Contest，因为要实现的主要页面是在体育/赛事，其他页面后续完善 底部导航栏 路
react项目实战-好客租房
口袋的天空的博客
12-22 7408
一.项目介绍 好客租房-移动Web端 项目介绍：本项目是一个在线租房项目，实现了类似链家等项目的功能，解决了用户租房的需求 核心业务：在线找房（地图，条件搜索），用户登录，房源发布 技术栈 React核心库：react、react-dom、react-router-dom 脚手架：create-react-app 数据请求：axios UI组件库：antd-mobile 其他组件库：react-virtualized、formilk+yup、react-spring等 百度地图API 二.本地接口
React 项目实战核心重点知识梳理
chen13113的博客
02-22 267
react 基础总结
react项目实战 1 项目介绍、项目搭建
m0_45877477的博客
08-01 1259
介绍: 一个在线租房项目,实现了类似链家等项目的功能,解决了用户租房的需求. 核心业务: 在线找房(地图、条件搜索)、用户登录、房源发布等 技术栈: react核心库:react、react-dom、react-router-dom 脚手架: create-react-app 数据请求: axios UI组件库: antd-mobile 其他组件库: react-virtualized、formik+yup、react-spring等 百度地图API............
react零基础入门到项目实战-01
corn6的博客
03-14 976
React与传统MVC的关系 react的特性 声明式：我只告诉你我想的东西是什么，具体怎么实现不需要我去实现；只需要根据react模板写好的规则去书写即可，而react怎么把数据映射到视图上的、怎么渲染到页面上的不需要我们去关心；将来数据发生了改变，react怎么去更新模板不需要我们去关心，我只负责改变数据即可；我们只关注数据层的改变 ...
使用React+Redux构建的手机端微信聊天室
项目采用的技术包括React、React-DOM、Redux、React-Redux用于状态管理，React-Router-DOM处理页面路由，wcPop作为弹窗插件，Webpack 2.0进行打包，Node.js和cnpm进行环境配置，以及react-photoswipe用于图片预览和...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值