前端第二次笔记

1.解构赋值的含义：解构赋值是一种在JavaScript中用于从数组或对象中提取值并赋给独立变量的语法。这是一种针对数组或者对象进行模式匹配，而后对其中的变量进行赋值的简洁语法。解构赋值的主要作用在于使代码书写更加简洁且易读，语义更加清晰明了，同时也方便了复杂对象中数据字段的获取。

const { x, y } = { x: 1, y: 2 };

 2.三元表达式：三元表达式（Ternary Operator）是许多编程语言（包括JavaScript、Python、C++等）中的一种条件运算符，它允许你根据一个条件的真假来直接返回一个值。这种表达式通常用于简化简单的if-else语句。

let age = 15;  
let beverage = (age >= 21) ? "Beer" : "Juice";  
console.log(beverage); // 输出 "Juice" 如果age小于21

3.important 规则：无论引入方式（内联、嵌入或外链）和选择器是什么，使用 important 声明的样式规则的优先级都是最高的
引入方式：行内样式的优先级高于嵌入样式和外链样式。
选择器类型：不同类型的选择器具有不同的优先级。通常，选择器的优先级按照以下顺序递减：ID选择器 > 类选择器、伪类选择器、属性选择器 > 后代选择器、伪元素选择器 > 子选择器、相邻选择器 > 通配符选择器。
 

4.v-for的用法：用于在组件上使用，以渲染一个由数据项组成的数组。

<view wx:for="{{array}}" wx:key="unique">  
  {{index}}: {{item}}  
</view>

 在上面的例子中，array 是一个数组，wx:for 会遍历这个数组，并为数组中的每个元素创建一个 <view> 组件。wx:key 是一个必须的属性，用于指定列表中项目的唯一的标识符，有助于提高列表渲染的性能。
v-for 用于渲染一个列表的数据。

5.流程（发送请求-拿到数据-渲染页面）的具体含义作用

 1.发送请求：确定请求类型：首先，需要确定要发送的请求类型（GET、POST、PUT、DELETE等）。GET请求通常用于从服务器获取数据，而POST、PUT和DELETE则用于向服务器发送数据、更新数据或删除数据。构建请求URL：根据所需的数据或资源，构建正确的请求URL。这可能包括路径、查询参数等。设置请求头：根据需要，设置请求头，例如Content-Type（指定发送数据的格式，如application/json）、Authorization（用于身份验证的令牌）等。发送请求：使用前端框架或库的HTTP客户端（如Axios、Fetch API等）发送请求。

 2.拿到数据：处理响应：一旦请求发送出去，前端代码需要监听响应。响应通常包含一个状态码（如200表示成功，404表示未找到资源等）和响应体（包含请求的数据）。解析数据：根据响应头的Content-Type，前端代码需要解析响应体中的数据。例如，如Content-Typapplication/json，则需要使用JSON解析器将响应体转换为JavaScript对象。错误处理：如果请求失败或返回了错误状态码，前端代码需要适当地处理这些错误，例如显示错误消息或重试请求。
   3.渲染页面：更新状态：在拿到数据后，通常需要更新前端应用的状态（如果使用状态管理库，如Vuex或Redux）。渲染组件：根据更新后的状态，前端框架会重新渲染相关的组件或元素。这通常涉及到使用模板语法或JSX等语法将数据和HTML结构结合起来。优化性能：为了提高性能，可以使用各种技术来优化渲染过程，如虚拟滚动、懒加载、服务端渲染（SSR）或预渲染等。
）等。

 6.常见http状态码

    1xx (信息性状态码)

• 100 Continue：继续。客户端应继续其请求。
• 101 Switching Protocols：切换协议。服务器根据客户端的请求切换协议。

   2xx (成功状态码)

• 200 OK：请求成功。一般用于GET与POST请求。
• 201 Created：已创建。成功请求并创建了新的资源。
• 202 Accepted：已接受。已经接受请求，但处理尚未完成。
• 203 Non-Authoritative Information：非授权信息。请求成功。但返回的meta信息不在原始的服务器，而是一个副本。
• 204 No Content：无内容。服务器成功处理了请求，但没有返回任何内容。
• 206 Partial Content：部分内容。服务器成功处理了部分GET请求。

   3xx (重定向状态码)

• 301 Moved Permanently：永久移动。请求的资源已被永久的移动到了由Location头部指定的URL上，以后应直接使用新的URL。
• 302 Found：临时移动。与301类似。但资源只是临时被移动。客户端应继续使用原有URL。
• 303 See Other：查看其他。表示请求的资源存在着另一个URI，应使用GET方法定向获取请求的资源。
• 304 Not Modified：未修改。所请求的资源未修改，服务器返回此状态码时，不会返回任何资源。客户端通常会缓存访问过的资源，通过提供一个头信息指出客户端希望只返回在指定日期之后修改的资源。
• 307 Temporary Redirect：临时重定向。与302类似。使用GET请求重定向。

   4xx (客户端错误状态码)

• 400 Bad Request：由于包含语法错误，请求无法被理解。
• 401 Unauthorized：请求要求身份验证。对于需要登录的网页，服务器可能返回此响应。
• 403 Forbidden：服务器理解请求客户端的请求，但是拒绝执行此请求。
• 404 Not Found：服务器无法根据客户端的请求找到资源（网页）。通过此代码，网站设计人员可设置"您所请求的资源无法找到"的个性页面。
• 405 Method Not Allowed：客户端请求中的方法被禁止。
• 408 Request Timeout：请求超时。

   5xx (服务器错误状态码)

• 500 Internal Server Error：服务器内部错误，无法完成请求。
• 501 Not Implemented：服务器不支持当前请求所需要的某个功能。
• 502 Bad Gateway：作为网关或代理工作的服务器尝试执行请求时，从上游服务器接收到无效的响应。
• 503 Service Unavailable：由于临时的服务器维护或者过载，服务器当前无法处理请求。
• 504 Gateway Timeout：作为网关或者代理工作的服务器尝试执行请求时，未能及时从上游服务器（URI标识出的服务器，例如HTTP、FTP、LDAP）或者辅助服务器（例如DNS）收到响应。

7. axios请求拦截器和响应拦截器

// 请求拦截器
instance.interceptors.request.use(req=>{}, err=>{});
// 响应拦截器
instance.interceptors.reponse.use(req=>{}, err=>{});

 请求拦截器

// use(两个参数)
axios.interceptors.request.use(req => {
    // 在发送请求前要做的事儿
    ...
    return req
}, err => {
    // 在请求错误时要做的事儿
    ...
    // 该返回的数据则是axios.catch(err)中接收的数据
    return Promise.reject(err)
})

响应拦截器

 // use(两个参数)
axios.interceptors.reponse.use(res => {
    // 请求成功对响应数据做处理
    ...
    // 该返回的数据则是axios.then(res)中接收的数据
    return res
}, err => {
    // 在请求错误时要做的事儿
    ...
    // 该返回的数据则是axios.catch(err)中接收的数据
    return Promise.reject(err)
})