全栈基础知识的梳理

骚年的潜力

已于 2023-09-14 18:50:52 修改

阅读量55

点赞数

文章标签： javascript 前端开发语言

于 2023-09-14 18:50:21 首次发布

本文链接：https://blog.csdn.net/2203_75620248/article/details/132847701

版权

全栈基础知识的梳理

一.在node环境下js操作
二.在浏览器环境下向服务器发起网络请求
三.如何处理跨域问题
- 1.代理服务器
- 2.CORS（跨域资源共享）

上一次笔记大体讲了一下一些知识点。
该笔记是补充一些内容。

一.在node环境下js操作

1.在node环境下js数据的导入和导出

在node环境下的代码导入和导出
export 和 export default：

export 和 export default 可以在一个模块中导出多个功能。
export 是命名导出，可以导出多个变量、函数或类，需要使用 {} 包裹导出的内容。例如：export const myVar = … 或 export function myFunction() { … }。
export default 是默认导出，只能导出一个功能，不需要使用 {}，并且导入时可以给导出的功能起任意名称。例如：export default myFunction。
导入时，需要使用 import 关键字来引入模块的功能。例如：import { myFunction } from ‘./module’ 或 import myFunction from ‘./module’。

// 使用 module.exports 和 exports 导出模块
module.exports = {
  myFunction: () => { ... },
  myVariable: 'value'
};

// 或者使用 exports
exports.myFunction = () => { ... };
exports.myVariable = 'value';

// 使用 export 和 export default 导出模块
export const myFunction = () => { ... };
export const myVariable = 'value';

export default myFunction;

导入

// 使用 require 导入模块
const module = require('./module');
console.log(module.myFunction);

// 使用 import 导入模块
import { myFunction } from './module';
console.log(myFunction);

// 导入默认导出的功能
import myFunction from './module';
console.log(myFunction);

2.在浏览器环境下js数据的导入和导出

在浏览器环境下，可以使用 ES6 的模块语法进行数据的导入和导出。浏览器环境默认支持 ES6 的模块语法，无需其他工具或插件。
1.导出数据：
在要导出的数据前加上 export 关键字，可以导出变量、函数、类等。
使用 export default 关键字可以导出一个默认的功能。

// 导出变量
export const myVariable = 'value';

// 导出函数
export function myFunction() {
  // ...
}

// 导出类
export class MyClass {
  // ...
}

// 导出默认功能
export default function() {
  // ...
}

2.导入数据：
使用 import 关键字来导入模块中的数据，可以导入具名导出的数据，也可以导入默认导出的数据。
导入的数据可以赋值给任意变量。

// 导入具名导出的变量
import { myVariable } from './module';

// 导入具名导出的函数
import { myFunction } from './module';

// 导入具名导出的类
import { MyClass } from './module';

// 导入默认导出的功能
import myDefaultFunction from './module';

需要注意的是，浏览器环境下使用 ES6 的模块语法时，模块文件的扩展名应为 .mjs，并且需要在 HTML 文件中的

<script type="module" src="main.mjs"></script>

3.node的第三方模块

Node.js 的第三方模块是由社区开发的，可以通过 npm（Node Package Manager）进行安装和管理。以下是一些常用的 Node.js 第三方模块的示例：

Express：用于创建基于 Node.js 的 Web 应用程序的快速、灵活的框架。
Lodash：提供了许多实用的 JavaScript 工具函数，用于简化开发过程中的常见操作。
MongoDB：用于连接和操作 MongoDB 数据库的官方驱动程序。
Axios：用于进行 HTTP 请求的简单、灵活的库。
Moment.js：用于解析、验证、操作和显示日期和时间的库。
Socket.io：用于实时、双向通信的库，支持 WebSocket 和轮询等传输方式。
Passport：用于身份验证和授权的简化库，支持多种身份验证策略。
Mocha：用于编写和运行测试的功能齐全的测试框架。
安装这些模块的命令是 npm install 模块名。例如，要安装 Express，可以执行以下命令：
npm install express

安装后，可以在你的代码中使用 require 来导入这些模块，如：

const express = require('express');
const axios = require('axios');
const moment = require('moment');
// ...

4.使用promise对象来解决异步编程的问题

在 JavaScript 中，Promise 对象是一种用来处理异步操作的机制。它可以让我们更好地组织和控制异步代码的执行流程。

Promise 对象有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。当一个异步操作执行完成时，Promise 对象的状态会从 pending 变为 fulfilled 或 rejected。


let fs = require('fs');
new Promise((resolve, reject) => {
    fs.readFile('./02-nodejs.html', 'utf-8', (err, data) => {
        if (err) reject(err);
        resolve(data);
    })
}).then(d => {
    console.log(d);
    return new Promise((resolve, reject) => {
        fs.readFile('./05-es6模块化.html', { encoding: 'utf-8' }, (err, data) => {
            if (err) reject(err);
            resolve(data);
        })
    })
}).then(d => {
    console.log(d);
    return new Promise((resolve, reject) => {
        fs.readFile('./01-dos.html', { encoding: 'ust-8' }, (err, data) => {
            if (err) throw err;
            console.log(data);
            resolve(data)
        })
    })
}).then(d => {
    console.log(d);
})

使用 Promise 对象可以更加清晰和可读地编写异步代码，而不需要嵌套多个回调函数。同时，Promise 还提供了一些其他方法，如 all、race 等，用于处理多个异步操作的场景。

5.使用sync函数来处理异步编程的问题

async/await 是 JavaScript 中处理异步编程的一种更加简洁和易读的方式。使用 async/await 可以让异步代码看起来像同步代码，提高代码的可读性和可维护性。

async 函数是异步函数的一种特殊语法，它返回一个 Promise 对象。在 async 函数中可以使用 await 关键字来等待一个异步操作的结果，await 关键字会暂停函数的执行，直到异步操作执行完成并返回结果。

function fetchData() {
  return new Promise((resolve, reject) => {
    // 异步操作
    setTimeout(() => {
      const data = 'Hello, World!';
      resolve(data); // 执行成功，将结果传递给 resolve 函数
      // 或者 reject('Error message'); // 执行失败，将错误信息传递给 reject 函数
    }, 2000); // 模拟异步操作，延迟 2 秒
  });
}

async function getData() {
  try {
    const data = await fetchData(); // 等待 fetchData() 函数执行完成并返回结果
    console.log(data); // 成功时的处理逻辑
  } catch (error) {
    console.error(error); // 失败时的处理逻辑
  }
}

getData();

二.在浏览器环境下向服务器发起网络请求

1.AJAX请求

在浏览器环境下，可以使用 AJAX（Asynchronous JavaScript and XML）技术通过 XMLHttpRequest 对象来发起网络请求。

const xhr = new XMLHttpRequest();
xhr.open('GET', url, true);  // true 表示异步请求
xhr.onreadystatechange = function() {
  if (xhr.readyState === XMLHttpRequest.DONE) {
    if (xhr.status === 200) {
      const response = JSON.parse(xhr.responseText);
      console.log(response);
    } else {
      console.error('Request failed. Status:', xhr.status);
    }
  }
};
xhr.send();

上面的代码创建了一个 XMLHttpRequest 对象，并通过 open 方法指定请求的方法（GET）、URL 和是否为异步请求。然后，我们为 xhr.onreadystatechange 事件绑定一个回调函数，在请求状态改变时执行该函数。在回调函数中，我们可以检查 xhr.readyState 的值来确定请求的状态，当 xhr.readyState 等于 XMLHttpRequest.DONE 时，表示请求完成。接着，我们可以检查 xhr.status 的值来确定请求的结果，当 xhr.status 等于 200 时，表示响应成功。在成功的情况下，可以通过 xhr.responseText 属性获取到响应数据。

如果需要发送 POST 请求，可以使用 xhr.setRequestHeader 方法设置请求头，并通过 xhr.send 方法发送请求体的数据。以下是一个使用 AJAX 发起 POST 请求的示例代码：

const xhr = new XMLHttpRequest();
xhr.open('POST', url, true);  // true 表示异步请求
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onreadystatechange = function() {
  if (xhr.readyState === XMLHttpRequest.DONE) {
    if (xhr.status === 200) {
      const response = JSON.parse(xhr.responseText);
      console.log(response);
    } else {
      console.error('Request failed. Status:', xhr.status);
    }
  }
};
const data = { username: 'john', password: 'secret' };
xhr.send(JSON.stringify(data));

2.使用fetch 函数发起网络请求

使用 fetch 函数可以方便地发起网络请求。它是基于 Promise 的现代浏览器 API，用于替代传统的 XMLHttpRequest。

fetch('https://api.example.com/posts')
  .then(response => response.json())
  .then(data => {
    // 处理响应数据
    console.log(data);
  })
  .catch(error => {
    // 处理错误
    console.error('Error:', error);
  });

在上述示例中，我们调用 fetch 函数，并传入一个 URL 参数来指定请求的目标地址。 fetch 函数返回一个 Promise 对象，可以通过链式调用 .then() 方法来处理响应。

在第一个 .then() 方法中，我们调用 response.json() 方法将响应数据解析为 JSON 对象。这里的 response 是 fetch 函数返回的响应对象。

然后，我们可以通过链式调用另一个 .then() 方法来处理解析后的 JSON 数据。在示例中，我们简单地将数据打印到控制台。

如果在请求过程中发生了错误，可以通过 .catch() 方法捕获错误并进行处理。
一般没有配置发起网络请求的类型的话，默认为get类型。

要使用 fetch 发起 POST 请求，你需要提供额外的配置选项，例如请求方法和请求头等。下面是一个使用 fetch 发起 POST 请求的示例代码：

fetch('https://api.example.com/posts', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    // 其他请求头
  },
  body: JSON.stringify({
    // 请求体数据
    title: 'Example',
    content: 'This is an example post'
  })
})
  .then(response => response.json())
  .then(data => {
    // 处理响应数据
    console.log(data);
  })
  .catch(error => {
    // 处理错误
    console.error('Error:', error);
  });

3.使用axios发起网络请求

使用 Axios 发起网络请求非常简单。首先，确保已经安装了 Axios 模块（可以使用 npm 或者 yarn 进行安装）：
npm install axios
然后，在你的代码中引入 Axios 模块：

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

接下来，你可以使用 Axios 的各种方法来发起网络请求。下面是一个使用 Axios 发起 GET 请求的示例：

axios.get('https://api.example.com/posts')
  .then(response => {
    // 处理响应数据
    console.log(response.data);
  })
  .catch(error => {
    // 处理错误
    console.error('Error:', error);
  });