AJAX基本用法 - 技术栈

1.axios

基本语法:

js 复制代码

axios({
  url: '目标资源地址'
}).then((result) => {
  // 对服务器返回的数据做后续处理
})

查询参数（在params中设置）：

查询参数通常是指在URL中传递给服务器以获取动态数据或指定请求条件的一部分。它们位于URL中问号(?)后面，多个参数之间用&符号分隔。每个查询参数由键值对组成，键和值之间用等号(=)连接。下面是一个带有查询参数的URL示例：
https://example.com/search?q=query+string&category=technology&sort=date

js 复制代码

axios({
  url: '目标资源地址',
  params: {
    参数名: 值
  }
}).then(result => {
  // 对服务器返回的数据做后续处理
})

请求方法（默认为GET）：

js 复制代码

axios({
  url: '目标资源地址',
  method: '请求方法',
  data: {
    参数名: 值
  }
}).then(result => {
  // 对服务器返回的数据做后续处理
})

错误处理：

js 复制代码

axios({
  // ...请求选项
}).then(result => {
  // 处理成功数据
}).catch(error => {
  // 处理失败错误
})

2.HTTP协议

请求报文

一个典型的HTTP请求由以下几个部分组成：

请求行（Request Line）：包括方法（如GET、POST）、请求URI（Uniform Resource Identifier）和协议版本。
请求头（Header Fields） ：一系列键值对，提供了请求的附加信息，如User-Agent（客户端信息）、Accept-Language（可接受的语言）等。
空行：请求头结束的标志。
请求体（Request Body）：并非所有请求都有请求体，通常在POST请求中携带，用于提交表单数据、文件上传等。

响应报文

HTTP响应同样由几个部分构成：

状态行（Status Line）：包括协议版本、状态码（如200 OK、404 Not Found）和状态消息。
响应头（Header Fields） ：类似请求头，提供了响应的元数据，如Content-Type（内容类型）、Content-Length（内容长度）等。
空行：响应头结束的标志。
响应体（Response Body）：包含了请求资源的实际数据，如HTML页面、图片数据等。

3.form-serialize批量获得表单数据

form-serialize 插件语法：

引入 form-serialize 插件到自己网页中
使用 serialize 函数
- 参数1：要获取的 form 表单标签对象（要求表单元素需要有 name 属性-用来作为收集的数据中属性名）
- 参数2：配置对象
  - hash：
    - true - 收集出来的是一个 JS 对象结构
    - false - 收集出来的是一个查询字符串格式
  - empty：
    - true - 收集空值
    - false - 不收集空值

js 复制代码

  <--1. 把插件引入到自己网页中-->

  <script src="./lib/form-serialize.js"></script>
  
  const form = document.querySelector('.example-form')
  const data = serialize(form, { hash: true, empty: true })
  // const data = serialize(form, { hash: false, empty: true })
  // const data = serialize(form, { hash: true, empty: false })
  console.log(data)

4.XMLHttpRequest

基本语法：

js 复制代码

const xhr = new XMLHttpRequest()	//先创建xhr对象
xhr.open('请求方法', '请求url网址')
xhr.addEventListener('loadend', () => {
  // 响应结果
  console.log(xhr.response)
})
xhr.send()

设置请求头：

setRequestHeader() 方法是 XMLHttpRequest 对象的一个方法，用于设置即将发送的 HTTP 请求的 HTTP 头部信息。这在需要自定义请求头时非常有用，例如设置 Content-Type、Authorization 等。

js 复制代码

//xhr.setRequestHeader(header, value); 基本用法

var xhr = new XMLHttpRequest();
xhr.open('POST', 'url');
xhr.setRequestHeader('Content-Type', 'application/json');

xhr.onreadystatechange = function () {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log(xhr.responseText);
  }
};

var data = JSON.stringify({ key: 'value' });
xhr.send(data);

在调用 setRequestHeader() 之前，必须先调用 open() 方法初始化请求。否则，该方法可能不会生效或抛出异常。

查询参数：

直接在url地址后面拼接查询参数（要加？来连接）：

js 复制代码

/**
 * 目标：使用XHR携带查询参数，展示某个省下属的城市列表
*/
const xhr = new XMLHttpRequest()
xhr.open('GET', 'http://hmajax.itheima.net/api/city?pname=辽宁省')
xhr.addEventListener('loadend', () => {
  console.log(xhr.response)
  const data = JSON.parse(xhr.response)
  console.log(data)
  document.querySelector('.city-p').innerHTML = data.list.join('<br>')
})
xhr.send()

5.URLSearchPrarms方法：

如果有多个查询参数，自己拼接很麻烦，这里用 URLSearchParams 把参数对象转成"参数名=值&参数名=值"格式的字符串，语法如下：

js 复制代码

// 1. 创建 URLSearchParams 对象
const paramsObj = new URLSearchParams({
  参数名1: 值1,
  参数名2: 值2
})

// 2. 生成指定格式查询参数字符串
const queryString = paramsObj.toString()
// 结果：参数名1=值1&参数名2=值2

其他操作：

从查询字符串创建URLSearchParams 实例

js 复制代码

const paramsString = "?q=query+string&category=technology&sort=date";
const searchParams = new URLSearchParams(paramsString);

读取参数

javascript 复制代码

console.log(searchParams.get('q')); // 输出: query string
console.log(searchParams.getAll('category')); // 如果有多个相同的key，会返回所有值组成的数组，否则同get
console.log(searchParams.has('sort')); // 检查参数是否存在，输出: true/false
console.log(searchParams.keys()); // 返回一个迭代器，包含所有参数的键
console.log(searchParams.values()); // 返回一个迭代器，包含所有参数的值
console.log(searchParams.entries()); // 返回一个迭代器，包含[key, value]形式的数组

修改和添加参数

javascript 复制代码

searchParams.set('sort', 'relevance'); // 设置或更新参数值
searchParams.append('filter', 'active'); // 添加新的参数
searchParams.delete('category'); // 删除参数

序列化为字符串

javascript 复制代码

const updatedParamsString = searchParams.toString(); // 将修改后的参数序列化为字符串
console.log(updatedParamsString); // 输出: ?q=query+string&sort=relevance&filter=active

整合到URL

如果你想将这些参数整合回一个完整的URL，可以使用 URL 构造函数：

javascript 复制代码

const baseURL = "https://example.com/search";
const fullURL = new URL(baseURL);
fullURL.search = searchParams.toString();
console.log(fullURL.href); // 输出完整的URL，包括查询参数

URLSearchParams 是处理查询字符串的强大工具，无论是用于前端还是在Node.js环境中处理HTTP请求时都非常有用。

6.promise

JavaScript中的Promise是一种处理异步操作的编程模式，它提供了更加优雅的方式来组织和管理异步代码，相较于传统的回调函数，Promise能够避免回调地狱（Callback Hell），使得代码更加清晰和易于维护。下面我会详细介绍Promise的基本概念、状态、用法以及一些关键方法。

基本概念

Promise是一个对象，代表一个异步操作的最终完成（或失败）及其结果。它有三种状态：

Pending（等待中）：初始状态，既没有完成也没有失败。
Fulfilled（已成功）：表示操作成功完成，此时Promise变为resolved状态。
Rejected（已失败）：表示操作失败，此时Promise变为rejected状态。

一旦Promise从Pending变为Fulfilled或Rejected，其状态就不可更改了，这称为Promise的不可变性。

创建Promise

使用new Promise()构造函数创建一个新的Promise实例：

javascript 复制代码

const myPromise = new Promise((resolve, reject) => {
  // 异步操作
  setTimeout(() => {
    if (/* 操作成功 */) {
      resolve("操作结果");
    } else {
      reject("操作失败的原因");
    }
  }, 2000);
});

消费Promise

使用.then()

当Promise处于fulfilled状态时，可以通过.then()方法注册一个或多个成功的回调函数：

javascript 复制代码

myPromise.then((result) => {
  console.log(result); // 打印操作结果
});

使用.catch()

当Promise处于rejected状态时，可以使用.catch()方法注册一个错误处理回调：

javascript 复制代码

myPromise.catch((error) => {
  console.error(error); // 处理错误
});

.catch()还可以捕获前面.then()链中抛出的异常。

使用.finally()

无论Promise最终状态如何（fulfilled或rejected），.finally()中的回调都会被执行，适合做清理

Promise.all 静态方法

概念：合并多个 Promise 对象，等待所有同时成功完成（或某一个失败），做后续逻辑

语法：

js 复制代码

const p = Promise.all([Promise对象, Promise对象, ...])
p.then(result => {
  // result 结果: [Promise对象成功结果, Promise对象成功结果, ...]
}).catch(error => {
  // 第一个失败的 Promise 对象，抛出的异常对象
})

7.利用XHR和promise封装axios函数

js 复制代码

function myAxios(config) {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest()

    if (config.params) {
      const paramsObj = new URLSearchParams(config.params)
      const queryString = paramsObj.toString()
      config.url += `?${queryString}`
    }
    xhr.open(config.method || 'GET', config.url)

    xhr.addEventListener('loadend', () => {
      if (xhr.status >= 200 && xhr.status < 300) {
        resolve(JSON.parse(xhr.response))
      } else {
        reject(new Error(xhr.response))
      }
    })
    // 1. 判断有data选项，携带请求体
    if (config.data) {
      // 2. 转换数据类型，在send中发送
      const jsonStr = JSON.stringify(config.data)
      xhr.setRequestHeader('Content-Type', 'application/json')
      xhr.send(jsonStr)
    } else {
      // 如果没有请求体数据，正常的发起请求
      xhr.send()
    }
  })
}

8.回调地狱

在JavaScript中，当多个异步操作依赖于彼此的结果时，如果使用传统的回调函数处理，代码会迅速变得嵌套复杂，难以阅读和维护，这种现象被称为"回调地狱"（Callback Hell）。

例如，下面是一个简单的回调地狱示例：

javascript 复制代码

doSomething(function(err, result1) {
    if (err) {
        console.error(err);
    } else {
        doSomethingElse(result1, function(err, result2) {
            if (err) {
                console.error(err);
            } else {
                doAnotherThing(result2, function(err, result3) {
                    if (err) {
                        console.error(err);
                    } else {
                        console.log(result3);
                    }
                });
            }
        });
    }
});

使用Promise解决

依靠 then() 方法会返回一个新生成的 Promise 对象特性，继续串联下一环任务，直到结束

Promise是JavaScript原生提供的解决异步编程的一种机制，它可以将复杂的嵌套回调链路扁平化，使得代码更加清晰和易于维护。

下面是使用Promise重写上述例子的方式：

javascript 复制代码

function doSomething() {
    return new Promise((resolve, reject) => {
        // 异步操作...
        setTimeout(() => {
            resolve('result1');
        }, 1000);
    });
}

function doSomethingElse(result) {
    return new Promise((resolve, reject) => {
        // 异步操作...
        setTimeout(() => {
            resolve(`${result} - result2`);
        }, 1000);
    });
}

function doAnotherThing(result) {
    return new Promise((resolve, reject) => {
        // 异步操作...
        setTimeout(() => {
            resolve(`${result} - result3`);
        }, 1000);
    });
}

doSomething()
    .then(result1 => doSomethingElse(result1))
    .then(result2 => doAnotherThing(result2))
    .then(result3 => console.log(result3))
    .catch(err => console.error(err));

async/await进一步简化

ES2017引入了async/await语法，它基于Promise，提供了更加简洁的异步编程方式。使用async/await，可以让异步代码看起来像同步代码一样直观（用到了 try catch 捕获同步流程的错误）：

javascript 复制代码

async function executeTasks() {
    try {
        const result1 = await doSomething();
        const result2 = await doSomethingElse(result1);
        const result3 = await doAnotherThing(result2);
        console.log(result3);
    } catch (error) {
        console.error(error);
    }
}

executeTasks();

在这个版本中，通过async关键字定义了一个异步函数，在该函数内部可以使用await关键字等待Promise的结果，从而避免了.then()链的嵌套，使代码更加简洁和易于理解。

9.事件循环

概念：执行代码和收集异步任务，在调用栈空闲时，反复调用任务队列里回调函数执行机制

作用：JavaScript 是单线程的，为了不阻塞 JS 引擎，设计执行代码的模型

原理：执行同步代码，遇到异步代码交给宿主浏览器环境执行

异步有了结果后，把回调函数放入任务队列排队

当调用栈空闲后，反复调用任务队列里的回调函数

宏任务：

浏览器执行的异步代码

例如：JS 执行脚本事件，setTimeout/setInterval，AJAX请求完成事件，用户交互事件等

微任务：

JS 引擎执行的异步代码

例如：Promise对象.then()的回调

宏任务在微任务之后执行，且每个宏任务结束后都会检查微任务队列。