目录

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请求由以下几个部分组成:

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

响应报文

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

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

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

form-serialize 插件语法:

  1. 引入 form-serialize 插件到自己网页中

  2. 使用 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-TypeAuthorization 等。

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是一个对象,代表一个异步操作的最终完成(或失败)及其结果。它有三种状态:

  1. Pending(等待中):初始状态,既没有完成也没有失败。
  2. Fulfilled(已成功):表示操作成功完成,此时Promise变为resolved状态。
  3. 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()的回调

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

本文是转载文章,点击查看原文
如有侵权,请联系 xyy@jishuzhan.net 删除
相关推荐
腾讯TNTWeb前端团队1 小时前
helux v5 发布了,像pinia一样优雅地管理你的react状态吧
前端·javascript·react.js
范文杰4 小时前
AI 时代如何更高效开发前端组件?21st.dev 给了一种答案
前端·ai编程
拉不动的猪4 小时前
刷刷题50(常见的js数据通信与渲染问题)
前端·javascript·面试
拉不动的猪4 小时前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
FreeCultureBoy5 小时前
macOS 命令行 原生挂载 webdav 方法
前端
uhakadotcom6 小时前
Astro 框架:快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom6 小时前
了解Nest.js和Next.js:如何选择合适的框架
前端·javascript·面试
uhakadotcom6 小时前
React与Next.js:基础知识及应用场景
前端·面试·github
uhakadotcom6 小时前
Remix 框架:性能与易用性的完美结合
前端·javascript·面试
uhakadotcom6 小时前
Node.js 包管理器:npm vs pnpm
前端·javascript·面试