Vue3全家桶笔记 - 目录导航

Vue3 笔记导航：

• 【1】🎯 前置准备和介绍（VsCode插件 + 组合式API和选项式API的比较）;
• 【2】🎯 声明响应式数据（ref + reactive + toRef + toRefs）；
• 【3】🎯 模板语法（指令+修饰符 + v-model语法糖）；
• 【4】🎯 侦听器；
• 【5】🎯 计算属性；
• 【6】🎯 组件（注册组件 + 组件通信 + 透传属性和事件 + 插槽 + 单文件CSS + 依赖注入）;
• 【7】🎯 生命周期;
• 【8】🎯 模板引用【ref】（访问模板引用 + v-for中的模板引用 + 组件上的ref）;

Vue-Router笔记导航：

• 【1】🎯 快速使用（创建路由模块 + 规定路由模式 + 使用路由规则 + 声明路由链接和出口）;
• 【2】🎯 重定向路由;
• 【3】🎯 嵌套路由【children】;
• 【4】🎯 路径参数;
• 【5】🎯 声明式导航 与 编程式导航（导航到不同位置 + 替换当前位置 + 路由历史）;
• 【6】🎯 导航守卫;

Pinia笔记导航：

• 🎯 安装与使用 + Store + State + Getters + Actions;

Axios 笔记导航

• 配置项 + 自定义创建实例 + 响应数据 + 请求错误处理 + 解决跨域;

axios

• Axios 是一个基于 Promise 网路请求库，作用于 node.js 和 浏览器 中；
• Axios 在服务端它使用原生 node.js http 模块，而在客户端（浏览器）则使用 XMLHttpRuquest；
• Axios 可以在拦截请求和响应、转换请求和响应数据、取消请求、自动转换 JSON 数据；
• Axios 安装方式：

  // npm
  npm i axios
  // ✅ yarn
  yarn add axios
  

1.1 Axios 配置项

• 这些是创建请求时最常见的配置选项，详细的配置项请前往Axios官网-请求配置查看；
• 注意：
  • 只有 url 是必须的；
  • 如果没有指定 method，则请求默认使用 GET 方法；

{
    // 请求的服务器地址 - url
    url: '/user',
    
    // 请求方式，默认值 GET（不区分大小写）
    method: 'GET',
    
    // 如果 url 不是绝对地址，则会发送请求时在 url 前方加上 baseURL
    baseURL: 'https://some-domain.com/api',
    
    // 与请求一起发送的 url 参数（GET请求）
    params: { Id: 123456 },
    
    // 作为请求体被发送的数据，仅适用于PUT、POST、DELETE、PATCH请求方法
    data: { firstName: 'Ha' },
    
    // 请求超时的毫秒数，如果请求事件超过 timeout 的值，则请求回终端，默认值是 0（永不超时）
    timeout: 5000,
    
    // 期望服务器返回到数据类型，选项包括：arraybugger、document、json、text、stream，浏览器专属：bolb，默认值：json
    responseType: 'json',
    
    // 允许向服务器发送前，修改请求数据，它只能用于PUT、POST、PATCH这几个请求
    transformRequest: [function (data, headers) {
        return data;  // 对发送的 data 进行任意转换处理
    }],
    
    // 在传递给 then/catch 浅，允许修改响应数据
    transformResponse: [fucntion (data) {
        return data;  // 对接受的 data 进行任意在从转换处理
    }]
}

1.2 发送请求

• 可以向 axios 传递相关配置项来创建请求；

1.2.1 axios(config)

• POST请求：

  axios({
      // 请求方式
      url: '/xxx',
      // 请求地址
      method: 'POST',
      // 其他配置
  })
  

• GET请求：

  axios({
      // 请求地址
      url: '/xxx',
      // 请求方式
      method: 'GET',
      // 其他配置
  })
  

1.2.2 axios(url[, config])

• POST请求：

  axios('/xxx', {
      method: 'POST',
      // 其他配置
  })
  

• GET请求：

  axios('/xxx', {
      method: 'GET',
      // 其他配置
  })
  

1.2.3 请求方式别名

• 为了方便，已经为所有支持的请求方法提供了别名：
  • axios.request(config)；
  • axios.get(url[, config])；
  • axios.delete(url[, config])；
  • axios.head(url[, config])；
  • axios.options(url[, config])；
  • axios.post(url[, data[, config]])；
  • axios.put(url[, data[, config]]；
  • axios.patch(url[, data[, config]])；
• 注意：
  • 在使用方法别名时，url、method、data 这些属性都不必在 config 中指定；
• POSt请求：

  axios.post('/xxx', {
      // 请求体终中的参数
  }, {
      // 其他配置
  })
  

• GET请求：

  axios.get('/xxx', {
      // 其他配置
  })
  

1.3 自定义创建实例

• axios.create([config])：调用 create 函数传入自定义配置项，来创建自定义 axios 实例；
• src/utils/request.js

  import axios from 'axios'  
  
  const request = axios.create({  
  baseURL: 'xxx',  
  timeout: 5000  
  })  
  
  export default request;
  

• src/api/user.js：

  import request from "@/utils/request.js";  
  
  const getUserInfo = (params) => request({  
      url: 'https://baidu.com',  
      // 此处的 method 可以省略  
      method: 'GET',  
      params  
  })  
  
  // TODO 默认导出  
  // export default {  
  //     getUserInfo  
  // }  
  
  // TODO 按需导出  
  export {  
      getUserInfo  
  }
  

1.4 响应数据

• 发送请求后通过.then(response => {})来获取服务器响应的数据response响应式结构；
• 也可以通过 async + await 去简化 then；
  • data：服务器提供的响应【最重要】；
  • status：来自服务器响应的 HTTP 状态码，成功为200，请求地址不存在为404，服务器异常为500，请求方式错误为405……；
  • statusText：来自服务器响应的 HTTP 状态信息；
  • headers：服务器响应头；
  • config： 请求的配置信息；
  • request：生成此响应的请求，在node.js中它是最后一个ClientRequest实例，在浏览器中则是XMLHttpRequest实例；

1.5 请求错误处理

• 发送请求后，使用 .catch( error => {}) 来处理此次请求异常，请求成功发出且服务器也响应了状态码，但状态代码超出了2xx的范围；

  axios({
      method: 'GET',
      url: 'xxx'
  }).then(err => {
      console.log('请求失败', err)
  })
  

1.6 解决跨域问题

• 跨域：
  • 浏览器 不能执行 其他网站 的 脚本；它是由 浏览器 的 同源策略 造成的，是 浏览器 对 javaScripr 施加的 安全限制；
• 同源策略：
  • 协议、域名、端口号都要相同，只要有一个不相同都会产生跨域；
• 浏览器为了安全问题一般都限制了跨域访问，也就是不允许跨域请求资源，如果未处理跨域访问则会在请求时控制台出现 【Access-Control-Allow-Origin... 】的报错信息；
• 如果处理跨域问题，可以在 vite 项目的 vite.config.js 文件中添加 proxy 代理；

import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
    plugins: [vue()],
    resolve: {
        alias: {
            '@': fileURLToPath(new URL('./src', import.meta.url))
        }
    },
    // 服务
    server: {
        // 代理
        proxy: {
            '/ok': {
                target: 'https://v.api.aa1.cn/api', // 代理后台服务器地址
                changeOrigin: true, //允许跨域               
                rewrite: path => path.replace(/^\/ok/,'') // 将请求地址中的 /ok 替换成空
            }
        }
    }
})