react面试2

Posted 2021-12-22 鲸渔要加油

文章目录

• 1、接口的请求怎么写的？
• 2、promise 的状态？
• 3、ES6 新增？
• 4、伪类和为元素
• 5、umi
• 6、鉴权怎么设计
• 7、墨客的数接口是怎么用的？
• 8、前后端怎么进行协作的？
• 9、webpack 常见的lodar和plugins？
• 10、浏览器从输入url到渲染完成？
• 11、xss攻击和csrf攻击？
• 12、页面卡顿在f12哪里看？
• 13、get和post请求的区别？

1、接口的请求怎么写的？

在项目的 src 里面的 services 文件夹里面进行配置

// 配置请求头
import request from '@/utils/request';
const basicURL = '/campus/campusweb';

// async 函数 配置接口
export async function fakeAccountLogin(params) 
  return request('/api/login/account', 
    method: 'POST',
    data: params,
  );

然后引入，用变量拿到 await 的返回值后判断 code 是否为 200，如果是就去解构 data 拿值

import  queryByUpdate  from '../../services/login';

// 在 useEffect 里面写 await
useEffect(async () => 
    const activityList = await queryByUpdate(
      activityBasicId: props.location.state.activityBasicId,
    );
    if (activityList.code == 200) 
      setActivityList(activityList.data);
     else 
      message.error('详情获取失败，请刷新重试');
    
  , [props.location.query.id])

2、promise 的状态？

一个 promise 可能有三种状态：等待（pending）、已完成（fulfilled）、已拒绝（rejected）

一个 promise 的状态只可能从等待转到完成态或者拒绝态，不能逆向转换，同时完成态和拒绝态不能相互转换

3、ES6 新增？

let 和 const 命令
箭头函数
call aplly bind
变量的解构赋值
模板字符串
symbol
Set 和 Map 数据结构

• set 可以去重，成员值都是唯一的
• map 可以将对象作为键

Proxy webpack配置反向代理时候好像用过
Promise
Generator 函数的语法

• 可以让函数分段执行，有一个关键字 yield 暂停再用 next 继续，时间切片就是用这个来做的

4、伪类和为元素

文章

5、umi

动态路由跳转

import Link from 'umi/link'
umi 对props.history进行了封装 props.history.push(/users/$user.id)
import router from 'umi/router'

配置路由
config/config.js 配置路由

export default
    routes: [
        path: "/", component: "./index", // 是相对于pages
        path: "/about", component: "./about", Routes: [
            "./routes/PrivateRoute.js"  // 是相对于根目录的  
        ], // Routes  路由守卫
        
            path: "/users",
            component: "./users/_layout"
            routes: [
                path: "/users/", component: "./users/index",
                path: "users/:id", component: "./users/$id"
            ]
        
    ]

6、鉴权怎么设计

1.权限分为前端和后端权限
2.前端权限：一般为前端rbac角色权限，通过给用户分配角色，再给角色分配权限，来控制
后端权限同理
3.权限颗粒度：前端的颗粒度分为 路由菜单 页面 按钮级别

说个最简单的，你登录获取到token以后去获取userinfo里面带着路由页面按钮权限，直接遍历出来就有侧边栏和页面了，这是后台动态获取的，按钮权限分为三种，一种函数式 一种，组件方式，一种指令式，一般用指令式

通过接口获取所有权限 再通过router过滤 对比 有的就放出来显示

7、墨客的数接口是怎么用的？

在项目开始的时候 项目整体架构已经自带了mock
直接去mock后台配置mock假数据 正常请求就完事了
就是项目排期完了以后 前端自己写mock文档 和后端沟通
按照你的数据结构 和数据接口名称 来开发
后期后端开发完了 你把你的mock关掉 就好了

最简单的回答 ：我们采用的线上Mock 我们已经在env文件里面配置好了mock开关 直接把VITE_USE_MOCK = false就关闭了 mock

8、前后端怎么进行协作的？

1.先根据排期，确定双方开发进度，知道后端先开发哪部分
2.然后我们设计好了数据结构或者mock文档以后 就去开发相对应的静态页面
3.这样需要前后端联调以后就很好调试了
根据不同项目性质来定性
如果是敏捷开发，就需要及时沟通，里程碑节点对接
接口文档 一般是Yapi

9、webpack 常见的lodar和plugins？

文章

10、浏览器从输入url到渲染完成？

文章
http和https的区别

11、xss攻击和csrf攻击？

XSS ：跨站脚本攻击，像木马像web页面恶意嵌入客户端脚本，当用户浏览此网页时，脚本就会在用户的浏览器上执行
解决:对输入进行过滤，对输出进行编码
CSRF：跨站请求伪造，最简单的方法就是抓取一个正常请求的数据包，去掉Referer字段后再重新提交，如果该提交还有效，那么基本上可以确定存在CSRF漏洞
目前防御 CSRF 攻击主要有三种策略：验证 HTTP Referer 字段；在请求地址中添加 token 并验证；在 HTTP 头中自定义属性并验证

12、页面卡顿在f12哪里看？

performance

13、get和post请求的区别？

最直观的区别就是GET把参数包含在URL中，POST通过request body传递参数
文章