前端相关笔记

路由器：

路由组成
- VueRouter：路由器，根据路由请求在路由视图上动态渲染对应组件。
- <router-link>：路由链接组件，浏览器会解析成超链接。
- <router-view>：路由器组件，用来展示与路由路径匹配的路由组件，可以将其类比为页面中的占位。
相关流程

点击<router-link>发出路由请求到VueRouter，VueRouter根据路由路径的不同去渲染对应的组件，渲染到<router-view>的这个位置

安装路由

1	npm install vue-router@3.5.1

router代码

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Manage',
    component: () => import( '../views/Manage.vue'),
  },
  {
    path: '/about',//组件路径
    name: 'about',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue'),//组件所在位置
    children: [
        {
          path: '子路由路径',
          component: '子路由组件'
        },
    ]
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

mode 选项定义了路由的模式。Vue Router 提供了两种模式：

* 'hash'：这是默认模式。在这种模式下，URL 会包含一个 # 符号，如 http://example.com/#/about。这种方式的好处是它对服务器没有特殊的要求，因为所有的 URL 都会发送到同一个 HTML 文件（通常是 index.html），然后由 Vue Router 接管。

'history'：在这种模式下，URL 会看起来像正常的 URL，没有 # 符号，如 http://example.com/about。但是，为了正常工作，服务器需要配置以支持这种方式。当访问这样的 URL 时，服务器需要返回与 index.html 相同的 HTML 文件，然后由 Vue Router 接管并显示正确的视图。

Vuex介绍

vuex是一个专门为vue.js应用程序开发的状态管理库
vuex可以在多个组件内共享数据，并且共享的数据时响应式的，及数据的变更能及时渲染到模板
vuex采用集中式存储所有组件的状态，更易管理，更规范

Ajax

ajax是一种异步无刷新技术

异步：无需等待服务器返回结果，便可以执行其他程序
无刷新：做了一些操作后，页面不会刷新，依然停留在当前位置

同步异步对比

在传统的Web应用中，当浏览器向服务器发送请求时，浏览器会等待服务器的响应，同时整个页面会被“锁定”，用户无法进行其他操作，直到服务器响应返回并处理完毕，页面才会重新“解锁”。这种方式被称为同步

在使用Ajax技术时，浏览器向服务器发送请求后，不会等待服务器的响应，而是立即返回并继续执行后续的代码。同时，浏览器会设置一个回调函数（Callback Function）来处理服务器的响应。当服务器响应返回时，浏览器会调用这个回调函数来处理响应数据，而不会阻塞用户的其他操作。这就是异步处理的方式。

例子

在搜索引擎中，会有自动补全功能，每输入一个或几个字符，浏览器会发送一个ajax请求到服务器获取相关联想数据，如果是非异步请求，则发送请求的这一段时间，用户无法进行其他操作，会大大降低用户体验，反之，使用异步，发送请求后，浏览器不会等待服务器的响应，而是立即返回并继续执行后续的代码（如允许用户继续输入或执行其他操作）。其中的无刷新技术也可以在浏览器接到响应后不刷新整个页面，而是使用js结合DOM操作动态的将相关数据显示出来。

具体代码

由于原生ajax过于繁杂，所以应用较少，这里介绍使用axios包装ajax请求的示例

安装 axios

如果你还没有安装 axios，你可以使用 npm 或 yarn 来安装它：

1
2
3

npm install axios  
# 或者  
yarn add axios

使用 axios 发送 GET 请求

// 引入 axios  
import axios from 'axios';  
  
// 发送 GET 请求到 API 地址  
axios.get('https://api.example.com/data')  
  .then(function (response) {  
    // 请求成功时，处理响应数据  
    console.log(response.data);  
  })  
  .catch(function (error) {  
    // 请求失败时，处理错误  
    console.error(error);  
  });

使用 axios 发送 POST 请求

// 引入 axios  
import axios from 'axios';  
  
// 发送 POST 请求到 API 地址，并携带一些数据  
axios.post('https://api.example.com/submit', {  
    firstName: 'Fred',  
    lastName: 'Flintstone'  
  })  
  .then(function (response) {  
    // 请求成功时，处理响应数据  
    console.log(response.data);  
  })  
  .catch(function (error) {  
    // 请求失败时，处理错误  
    console.error(error);  
  });

使用 async/await 简化代码

如果你正在使用支持 async/await 的环境（如较新版本的 JavaScript 或 TypeScript），你可以进一步简化你的代码：

// 引入 axios  
import axios from 'axios';  
  
async function fetchData() {  
  try {  
    // 使用 async/await 发送 GET 请求  
    const response = await axios.get('https://api.example.com/data');  
    // 请求成功时，直接处理响应数据  
    console.log(response.data);  
  } catch (error) {  
    // 请求失败时，处理错误  
    console.error(error);  
  }  
}  
  
// 调用函数  
fetchData();

使用 axios 可以让你更加专注于处理请求和响应数据，而不是编写复杂的错误处理和异步代码

typeScript介绍

为js的超集，js有的他都有，添加了类型补充

添加类型补充的好处
- TS属于静态类型编程语言，JS属于动态类型编程语言
- 静态类在编译期做类型检查，动态类在执行期做类型检查
- 则TS可以更早地发现问题

Promise

简介

promise是JS中进行异步编程的新解决方案，旧方案是单纯的使用回调函数

从语法上来看：promise是一个构造函数
从功能上来看：promise对象用来封装一个异步操作并可以获取其成功/失败的结果值

优势

指定回调函数的方式更加灵活

旧的：必须在启动异步任务前指定
promise：启动异步任务 => 返回promise对象 => 给promise对象绑定回调函数（甚至可以在异步任务结束后指定/多个）

支持链式调用，解决回调地狱问题

回调地狱：回调函数嵌套调用，外部回调函数异步执行的结果是嵌套的回调执行的条件
缺点：不便于阅读，不便于异常处理

解决方案：使用promise链式调用

原因：Promise 的链式调用（chaining）通过 .then() 和 .catch() 方法允许我们将异步操作连接在一起，每个 .then() 或 .catch() 方法都会返回一个新的 Promise，这样我们可以继续链式调用下去，而不是嵌套回调。

getData(function(err, data1) {  
  if (err) {  
    console.error(err);  
    return;  
  }  
  
  anotherData(data1, function(err, data2) {  
    if (err) {  
      console.error(err);  
      return;  
    }  
  
    yetAnotherData(data2, function(err, data3) {  
      if (err) {  
        console.error(err);  
        return;  
      }  
  
      // 最终处理结果  
      console.log(data3);  
    });  
  });  
});
//传统的回调地狱，很难阅读以及维护
getData()  
  .then(data1 => {  
    // 处理 data1  
    return anotherData(data1); // 注意这里返回了一个新的 Promise  
  })  
  .then(data2 => {  
    // 处理 data2  
    return yetAnotherData(data2); // 同样返回一个新的 Promise  
  })  
  .then(data3 => {  
    // 处理最终结果 data3  
    console.log(data3);  
  })  
  .catch(err => {  
    // 在任何步骤发生错误时，都会跳到这里  
    console.error(err);  
  });
//更加清晰易管理