2026年AJAX面试题及详细答案

2026年AJAX面试题及详细答案说明：本套面试题贴合2026年前端实际面试场景，涵盖基础概念、核心原理、实战应用、性能优化、跨域处理、框架结合等高频考点，题型全面（单选、多选、判断、简答题、编程题），答案详细易懂，完全贴合实际开发需求，避免理论与实践脱节。一、单项选择题（共10题，每题2分）下列关于AJAX的描述，错误的是（）

A.AJAX全称是AsynchronousJavaScriptandXML

B.AJAX可以在不刷新整个页面的情况下与服务器交换数据

C.AJAX仅能使用XML格式传输数据

D.AJAX的核心是异步请求与局部刷新

答案：C

解析：AJAX最初基于XML传输数据，但现在实际开发中，JSON格式因简洁、易解析，已成为最主流的传输格式，同时也支持文本、HTML片段等格式，并非仅能使用XML，因此C选项错误。

AJAX请求中，下列哪个方法用于初始化请求（）

A.send()

B.open()

C.onreadystatechange()

D.setRequestHeader()

答案：B

解析：open()方法用于初始化AJAX请求，语法为xhr.open(method,url,async)，其中method是请求方式（GET/POST等），url是请求地址，async表示是否异步（true为异步，false为同步）；send()用于发送请求；onreadystatechange是监听请求状态变化的事件；setRequestHeader用于设置请求头。

下列哪个不是AJAX请求的readyState状态值及对应含义（）

A.0：未初始化，未调用open()方法

B.1：已调用send()方法，正在发送请求

C.2：已接收响应头，未接收响应体

D.4：请求完成，响应数据已就绪

答案：B

解析：readyState共5个状态值，对应含义如下：

0：未初始化，创建XHR对象后，未调用open()；

1：已初始化，调用open()方法，未调用send()；

2：已发送，调用send()方法，服务器已接收请求，且返回响应头；

3：正在接收，服务器正在返回响应体（部分数据已接收）；

4：请求完成，响应数据全部接收完毕，可使用响应数据。

B选项描述错误，1状态是已调用open()，未调用send()。

下列关于GET和POST请求的区别，错误的是（）

A.GET请求参数拼接在URL后，POST请求参数放在请求体中

B.GET请求有长度限制，POST请求无明显长度限制

C.GET请求可缓存，POST请求默认不可缓存

D.GET请求比POST请求更安全，适合传输敏感数据

答案：D

解析：GET请求参数暴露在URL中，容易被截取，安全性较低，不适合传输密码、手机号等敏感数据；POST请求参数放在请求体中，相对安全，适合传输敏感数据，因此D选项错误。其他选项均为GET和POST的核心区别。

下列哪种方式不能解决AJAX跨域问题（）

A.CORS跨域资源共享

B.JSONP

C.本地存储localStorage

D.代理服务器

答案：C

解析：localStorage是浏览器本地存储技术，用于存储前端本地数据，与跨域请求无关，无法解决跨域问题；CORS是后端设置响应头实现跨域，JSONP通过动态创建script标签实现跨域，代理服务器通过中间层转发请求避免跨域，三者均能解决跨域问题。

AJAX请求中，下列哪个HTTP状态码表示请求成功（）

A.404

B.500

C.200

D.302

答案：C

解析：200状态码表示请求成功，服务器正常返回响应数据；404表示请求的资源不存在；500表示服务器内部错误；302表示重定向。

下列关于fetchAPI与XMLHttpRequest的区别，正确的是（）

A.fetchAPI是基于回调函数，XMLHttpRequest是基于Promise

B.fetchAPI默认不携带cookie，XMLHttpRequest默认携带cookie

C.fetchAPI无需手动处理错误，XMLHttpRequest需要手动处理

D.fetchAPI不支持POST请求，XMLHttpRequest支持

答案：B

解析：fetchAPI基于Promise，语法更简洁，XMLHttpRequest基于回调函数，A选项错误；fetchAPI默认不携带cookie，需手动设置credentials:'include'才能携带，XMLHttpRequest默认携带cookie，B选项正确；fetchAPI仅在网络错误时触发catch，HTTP状态码错误（如404、500）不会触发，需手动判断response.ok，C选项错误；fetchAPI支持GET、POST等所有HTTP请求方式，D选项错误。

下列哪种情况会导致AJAX请求缓存（）

A.POST请求，且请求头设置了Cache-Control:no-cache

B.GET请求，且请求地址和参数完全相同，浏览器未清除缓存

C.请求头设置了Pragma:no-cache

D.服务器返回响应头Cache-Control:no-store

答案：B

解析：GET请求默认会被浏览器缓存，当请求地址和参数完全相同时，浏览器会直接返回缓存数据，不会再次向服务器发送请求；POST请求默认不缓存；Cache-Control:no-cache、Pragma:no-cache、Cache-Control:no-store均会禁止缓存，因此B选项正确。

在jQuery中，下列哪个方法用于发送AJAX请求（）

A.$.ajax()

B.$.getJSON()

C.$.post()

D.以上都是

答案：D

解析：jQuery提供了多种AJAX相关方法，$.ajax()是通用方法，可配置所有请求参数；$.getJSON()专门用于发送GET请求，获取JSON格式数据；$.post()专门用于发送POST请求，三者均可发送AJAX请求，因此D选项正确。

下列关于AJAX请求超时处理的描述，正确的是（）

A.无法设置AJAX请求超时时间

B.仅XMLHttpRequest支持超时设置，fetchAPI不支持

C.超时后会触发error事件，可在事件中处理重试逻辑

D.超时时间设置越长，请求成功率越高

答案：C

解析：AJAX请求可设置超时时间，XMLHttpRequest通过xhr.timeout设置，fetchAPI可通过AbortController结合setTimeout实现超时控制，A、B选项错误；超时后会触发对应的错误事件，可在事件中编写重试逻辑（如最多重试3次），C选项正确；超时时间设置过长会导致用户等待时间过长，影响体验，并非越长越好，需根据接口响应速度合理设置，D选项错误。二、多项选择题（共5题，每题3分，多选、少选、错选均不得分）AJAX的核心组成技术包括（）

A.JavaScript

B.XML

C.CSS

D.XMLHttpRequest/fetchAPI

答案：ABD

解析：AJAX的核心组成技术包括JavaScript（用于触发请求、处理响应、更新DOM）、XML（最初的传输格式，现在可替换为JSON）、XMLHttpRequest/fetchAPI（用于发送异步请求、接收响应）；CSS用于页面样式美化，与AJAX核心功能无关，因此C选项不选。

下列属于AJAX请求优势的有（）

A.减少页面刷新，提升用户体验

B.减少网络数据传输量，提升页面加载速度

C.可实现实时数据交互（如实时聊天、实时刷新）

D.无需后端配合，可单独完成数据请求

答案：ABC

解析：AJAX的优势包括：局部刷新页面，避免整个页面刷新，提升用户体验；仅传输需要的数据，减少网络传输量，加快加载速度；可实现实时数据交互，如聊天软件、股票行情刷新等；AJAX需要与后端接口配合，才能获取数据，无法单独完成数据请求，因此D选项错误。

下列关于AJAX跨域的说法，正确的有（）

A.跨域是指浏览器限制不同域名、端口、协议之间的请求

B.JSONP仅支持GET请求，不支持POST请求

C.CORS跨域需要前端和后端共同配合实现

D.同一域名下，不同端口的请求不属于跨域

答案：ABC

解析：跨域的判断标准是“协议、域名、端口”三者有一个不同，即属于跨域，因此D选项错误（同一域名不同端口属于跨域）；A选项是跨域的定义，正确；JSONP基于script标签的src属性，仅支持GET请求，正确；CORS跨域需要后端设置Access-Control-Allow-Origin等响应头，前端可根据需求设置请求头，需前后端配合，正确。下列哪些是AJAX请求中常见的错误类型（）

A.网络错误（如断网、服务器未启动）

B.跨域错误（浏览器拦截跨域请求）

C.响应数据格式错误（如后端返回非JSON格式，前端按JSON解析）

D.请求超时错误

答案：ABCD

解析：AJAX请求中常见的错误类型包括：网络错误（断网、服务器未启动，导致请求无法发送）、跨域错误（浏览器同源策略拦截）、数据格式错误（前后端数据格式不匹配，如前端预期JSON，后端返回文本）、超时错误（请求超过设置的超时时间，服务器未响应），因此四个选项均正确。

2026年实际开发中，AJAX相关的最佳实践包括（）

A.对请求参数进行校验，避免无效请求

B.合理设置缓存策略，减少重复请求

C.对请求失败进行处理（如重试、提示用户）

D.优先使用fetchAPI或axios，替代原生XMLHttpRequest

答案：ABCD

解析：2026年前端开发中，AJAX最佳实践包括：前端提前校验请求参数（如必填项、格式校验），避免向服务器发送无效请求；合理设置缓存（如GET请求缓存、协商缓存），减少重复请求，提升性能；请求失败时，根据错误类型处理（如网络错误提示用户检查网络，超时可重试）；原生XMLHttpRequest语法繁琐，fetchAPI（原生）、axios（第三方库）语法更简洁、易用，且支持Promise，优先使用，因此四个选项均正确。

三、判断题（共5题，每题1分，对的打√，错的打×）AJAX是一种新的编程语言，用于实现页面异步交互。（）

答案：×

解析：AJAX不是编程语言，而是一种技术组合（JavaScript+XML+XMLHttpRequest/fetchAPI），用于实现页面异步交互、局部刷新。

AJAX请求默认是异步的，若设置为同步，会阻塞页面渲染和其他JS执行。（）

答案：√

解析：AJAX请求通过open()方法的第三个参数设置同步/异步（true为异步，false为同步）；同步请求会阻塞页面渲染和其他JS代码执行，直到请求完成，因此实际开发中几乎不使用同步请求。

fetchAPI请求成功后，会自动将响应数据解析为JSON格式。（）

答案：×

解析：fetchAPI请求成功后，返回的是Response对象，需要手动调用response.json()（解析为JSON）、response.text()（解析为文本）等方法，才能获取具体的响应数据，不会自动解析。

AJAX请求中，请求头只能由后端设置，前端无法修改。（）

答案：×

解析：前端可通过XMLHttpRequest的setRequestHeader()方法、fetchAPI的headers配置，设置请求头（如Content-Type、Authorization等），后端也可设置响应头，因此前端可以修改请求头。

使用axios发送AJAX请求，无需手动处理跨域问题，axios会自动解决。（）

答案：×

解析：axios只是一个AJAX请求库，简化了请求的编写，无法自动解决跨域问题；跨域问题需要通过CORS、JSONP、代理服务器等方式解决，与使用的请求库无关。

四、简答题（共8题，每题5分）请简要说明AJAX的工作原理。

答案：AJAX的核心原理是“异步请求+局部刷新”，本质是通过JavaScript创建请求对象（XMLHttpRequest或fetchAPI），在不刷新整个页面的情况下，向服务器发送异步请求，服务器接收请求后处理并返回数据，前端接收响应数据后，通过JavaScript操作DOM，只更新页面的局部内容，从而提升用户体验。

具体工作流程：

1.前端通过JavaScript触发事件（如点击按钮、输入内容）；

2.创建请求对象（XMLHttpRequest或fetchAPI）；

3.配置请求参数（请求方式、请求地址、请求头、请求参数等）；

4.发送异步请求到服务器；

5.服务器接收请求，处理业务逻辑，返回响应数据（JSON、文本等）；

6.前端监听请求状态变化，接收响应数据；

7.通过JavaScript解析响应数据，操作DOM，更新页面局部内容。

请详细说明GET和POST请求的区别（至少5点）。

答案：GET和POST是AJAX中最常用的两种请求方式，核心区别如下：

1.参数传递方式：GET请求参数拼接在URL后面，格式为url?key1=value1&key2=value2；POST请求参数放在请求体中，不会暴露在URL中。

2.长度限制：GET请求受浏览器和服务器限制，有长度限制（通常不超过2KB）；POST请求无明显长度限制，可传输大量数据（如文件上传）。

3.缓存机制：GET请求默认会被浏览器缓存，再次请求相同地址和参数时，会直接返回缓存数据；POST请求默认不缓存，每次都会向服务器发送新请求。

4.安全性：GET请求参数暴露在URL中，容易被截取、篡改，安全性低，不适合传输敏感数据（如密码、手机号）；POST请求参数在请求体中，相对安全，适合传输敏感数据。

5.用途场景：GET请求适合查询数据（如列表查询、详情查询），无需修改服务器数据；POST请求适合提交数据（如登录、注册、提交表单），需要修改服务器数据。

6.浏览器回退/刷新：GET请求回退、刷新时，不会重新提交数据，无副作用；POST请求回退、刷新时，会提示“是否重新提交”，可能导致重复提交。

请列举3种解决AJAX跨域的方法，并简要说明每种方法的原理和适用场景。

答案：实际开发中常用的AJAX跨域解决方案有3种，具体如下：

1.CORS（跨域资源共享）

原理：后端在响应头中设置Access-Control-Allow-Origin等相关字段，允许指定域名的前端请求访问服务器资源；前端无需额外操作（复杂场景需设置请求头），浏览器检测到响应头中的允许字段后，不拦截跨域请求。

适用场景：现代前端开发最常用的方式，支持GET、POST等所有请求方式，适合前后端分离项目（如Vue、React项目）。

2.JSONP

原理：利用script标签的src属性不受同源策略限制的特点，前端动态创建script标签，src指向跨域接口地址，并传入回调函数名；后端接收请求后，将数据包裹在回调函数中返回，前端通过回调函数获取响应数据。

适用场景：兼容旧版浏览器（如IE8及以下），仅支持GET请求，适合简单的跨域数据查询（如第三方接口调用）。

3.代理服务器

原理：前端请求本地服务器（同源），本地服务器作为代理，转发请求到目标跨域服务器，目标服务器返回数据后，本地服务器再将数据返回给前端；由于前端请求的是本地服务器，不存在跨域问题。

适用场景：前端无法修改后端代码（如调用第三方接口），或跨域场景复杂（如需要携带cookie、自定义请求头），常见于Vue、React项目的开发环境（如webpack-dev-server代理）。

如何处理AJAX请求的错误？请列举常见的错误类型及对应的处理方式。

答案：AJAX请求错误需要针对性处理，核心是“捕获错误+友好提示+合理重试”，常见错误类型及处理方式如下：

1.网络错误（断网、服务器未启动）

处理方式：监听error事件，提示用户“网络异常，请检查网络连接”，可提供“重新请求”按钮，点击后重试请求。

2.跨域错误（浏览器拦截）

处理方式：排查跨域解决方案是否正确（如CORS响应头是否设置、JSONP回调是否正确），若无法修改后端，可使用代理服务器。

3.请求超时错误

处理方式：设置合理的超时时间（如5000ms），超时后触发timeout事件，提示用户“请求超时，请稍后重试”，可实现自动重试（最多3次，避免无限重试）。

4.响应数据格式错误（如后端返回非JSON）

处理方式：解析数据前进行格式校验，若解析失败，提示用户“数据加载异常”，同时打印错误日志（便于排查），可尝试重新请求。

5.HTTP状态码错误（404、500等）

处理方式：判断响应状态码，404提示“请求资源不存在”，500提示“服务器内部错误，请稍后重试”，401提示“请先登录”，根据状态码给出对应提示。

补充：使用fetchAPI时，需手动判断response.ok（状态码200-299为成功），否则视为错误；使用axios时，可通过catch捕获所有错误，统一处理。

请说明XMLHttpRequest和fetchAPI的区别，以及2026年开发中优先选择哪种，为什么？

答案：XMLHttpRequest和fetchAPI都是AJAX请求的实现方式，核心区别如下：

1.语法结构：XMLHttpRequest基于回调函数，语法繁琐，需要监听onreadystatechange事件，判断readyState和status；fetchAPI基于Promise，语法简洁，支持链式调用（then/catch），代码可读性更高。

2.错误处理：XMLHttpRequest在网络错误、超时、状态码错误时，都会触发error事件；fetchAPI仅在网络错误时触发catch，HTTP状态码错误（如404、500）不会触发，需手动判断response.ok。

3.cookie携带：XMLHttpRequest默认携带cookie；fetchAPI默认不携带cookie，需手动设置credentials:'include'。

4.取消请求：XMLHttpRequest通过abort()方法取消请求；fetchAPI通过AbortController对象取消请求。

5.兼容性：XMLHttpRequest兼容性更好（支持所有现代浏览器及IE8+）；fetchAPI不支持IE浏览器，仅支持现代浏览器（Chrome、Firefox、Edge等）。

2026年开发中，优先选择fetchAPI或axios（基于Promise封装的请求库），原因如下：

1.现代开发中，IE浏览器已基本淘汰，fetchAPI兼容性满足需求；

2.Promise语法更简洁，支持async/await，可避免回调地狱，代码更易维护；

3.fetchAPI是浏览器原生API，无需引入第三方库（简单场景），axios则提供了更多便捷功能（如请求拦截、响应拦截、自动重试），适合复杂项目。

补充：若需兼容旧版浏览器，可使用XMLHttpRequest，或通过polyfill实现fetchAPI的兼容性。如何优化AJAX请求的性能？请列举至少5种优化方案。

答案：AJAX请求性能优化的核心是“减少请求次数、减少数据传输量、提升响应速度”，常见优化方案如下：

1.合理设置缓存：对GET请求设置缓存（如设置Cache-Control、Expires响应头），避免重复请求相同数据；对于不常变化的数据，可使用本地存储（localStorage）缓存，减少服务器请求。

2.合并请求：将多个独立的AJAX请求合并为一个请求（如批量获取数据），减少HTTP请求次数（HTTP请求建立连接、断开连接会消耗资源）。

3.压缩数据：后端对响应数据进行压缩（如gzip压缩），前端接收后解压，减少数据传输量；前端请求参数尽量简洁，避免传输无用数据。

4.分页加载/懒加载：对于大量数据（如列表），采用分页加载（每次请求一页数据）或懒加载（滚动到页面底部再请求下一页），避免一次性请求大量数据，导致页面卡顿。

5.优化请求时机：避免页面加载时同时发送多个AJAX请求，可优先加载核心数据，非核心数据延迟加载（如页面渲染完成后再请求）；避免频繁触发请求（如输入框输入时，使用防抖节流，减少请求次数）。

6.使用CDN加速：将静态资源（如JS、CSS、图片）和接口部署到CDN，缩短请求距离，提升响应速度。

7.取消无用请求：如页面切换时，取消当前页面未完成的AJAX请求，避免无用请求占用网络资源。

请说明AJAX请求中，如何防止浏览器缓存请求结果？

答案：防止AJAX请求缓存，核心是让浏览器认为每次请求都是“新请求”，常见方法如下（前端可单独实现，也可配合后端）：

1.给GET请求URL添加随机参数：在请求URL末尾添加随机数、时间戳等参数，确保每次请求的URL不同，浏览器不会缓存，例如：/api/list?timestamp=newDate().getTime()。

2.设置请求头，禁止缓存：前端通过setRequestHeader()设置请求头，告知浏览器不缓存当前请求，常用请求头如下：

xhr.setRequestHeader('Cache-Control','no-cache');

xhr.setRequestHeader('Pragma','no-cache');

3.后端设置响应头，禁止缓存：后端在响应头中设置Cache-Control:no-cache、Cache-Control:no-store、Expires:-1等，强制浏览器不缓存响应数据，这种方式最可靠，无需前端额外操作。

4.使用POST请求：POST请求默认不被浏览器缓存，若业务场景允许，可将GET请求改为POST请求（不推荐滥用，需符合GET/POST的使用场景）。

补充：实际开发中，优先使用“后端设置响应头”的方式，避免前端单独处理的兼容性问题。

在React/Vue项目中，如何使用AJAX请求？请举例说明（以其中一个框架为例）。

答案：以Vue3项目为例，实际开发中常用axios发送AJAX请求，步骤如下：

1.安装axios：通过npminstallaxios安装第三方请求库。

2.配置axios（可选，推荐）：创建axios实例，配置基础路径、超时时间、请求头、响应拦截等，便于全局管理，例如：

importaxiosfrom'axios';

constrequest=axios.create({

baseURL:'/api',//基础请求路径，可配合代理服务器

timeout:5000,//超时时间5秒

headers:{

'Content-Type':'application/json'//默认请求头

}

});

//响应拦截，统一处理错误

erceptors.response.use(

(response)=>response.data,//成功时，直接返回响应数据

(error)=>{

//错误处理，如提示用户、跳转登录等

if(error.response?.status===401){

//未登录，跳转登录页

router.push('/login');

}else{

alert(error.message||'请求失败，请稍后重试');

}

returnPromise.reject(error);

}

);

3.在组件中使用：在setup函数中，通过async/await调用请求，获取数据并渲染，例如：

import{ref,onMounted}from'vue';

importrequestfrom'@/utils/request';

exportdefault{

setup(){

constlist=ref([]);

//页面加载时请求数据

onMounted(async()=>{

try{

//发送GET请求，获取列表数据

constres=awaitrequest.get('/list',{

params:{page:1,size:10}//请求参数

});

list.value=res.data;

}catch(err){

console.error('请求失败',err);

}

});

//发送POST请求，提交数据

constsubmit=async(form)=>{

try{

awaitrequest.post('/submit',form);

alert('提交成功');

}catch(err){

console.error('提交失败',err);

}

};

return{list,submit};

}

};

补充：React项目使用方式类似，安装axios后，在组件的useEffect钩子中调用请求，处理数据渲染和错误。

五、编程题（共2题，每题10分）手写原生XMLHttpRequest，实现一个GET异步请求，要求：支持传入请求地址、参数，成功后返回解析后的JSON数据，失败时提示错误，并且支持超时处理（5秒超时）。

答案：

代码实现：

functiongetRequest(url,params={},timeout=5000){

//返回Promise，便于使用async/await

returnnewPromise((resolve,reject)=>{

//1.创建XMLHttpRequest对象

constxhr=newXMLHttpRequest();

//2.处理请求参数，拼接成URL查询字符串

constparamStr=Object.entries(params)

.map(([key,value])=>`${encodeURIComponent(key)}=${encodeURIComponent(value)}`)

.join('&');

//拼接完整请求地址（若有参数）

constfullUrl=paramStr?`${url}?${paramStr}`:url;

//3.初始化请求（GET方式，异步）

xhr.open('GET',fullUrl,true);

//4.设置超时时间

xhr.timeout=timeout;

//5.监听请求状态变化

xhr.onreadystatechange=function(){

//只有请求完成（readyState=4），才处理响应

if(xhr.readyState===4){

try{

//判断请求是否成功（状态码200-299）

if(xhr.status>=200&&xhr.status<300){

//解析JSON数据，返回给调用方

constresponseData=JSON.parse(xhr.responseText);

resolve(responseData);

}else{

//状态码错误，抛出错误

reject(newError(`请求失败，状态码：${xhr.status}`));

}

}catch(err){

//数据解析错误（如非JSON格式）

reject(newError(`数据解析失败：${err.message}`));

}

}

};

//6.监听超时事件

xhr.ontimeout=function(){

reject(newError(`请求超时，请稍后重试（超时时间：${timeout}ms）`));

};

//7.监听网络错误事件

xhr.onerror=function(){

reject(newError('网络异常，请检查网络连接'));

};

//8.发送请求

xhr.send();

});

}

//调用示例

getRequest('/user',{id:1})

.then((data)=>{

console.log('请求成功',data);

})

.catch((err)=>{

console.error('请求失败',err.message);

});

解析：该函数通过Promise封装原生XMLHttpRequest，支持传入请求地址、参数和超时时间；处理了参数拼接、JSON解析、超时、网络错误、状态码错误等场景，符合实际开发需求，调用方式简洁，可配合async/await使用。使用axios实现一个用户登录功能的AJAX请求，要求：

1.发送POST请求，请求地址为/api/login，请求参数为username和password；

2.请求头设置Content-Type为application/json；

3.成功登录后，将后端返回的token存储到localStorage中；

4.处理常见错误（网络错误、超时、401错误、登录失败），并给出对应提示；

5.支持请求取消（如用户重复点击登录按钮，取消上一次未完成的请求）。

答案：

代码实现：

importaxiosfrom'axios';

//创建axios实例

constrequest=axios.create({

baseURL:'',

timeout:5000,

headers:{

'Content-Type':'application/json'

}

});

//登录函数，支持取消请求

functionlogin(username,password){

//创建取消请求控制器

constcontroller=newAbortController();

constsignal=controller.signal;

//发送POST请求

constrequestPromise=request.post(

'/api/login',

{username,password},//请求体参数

{signal}//绑定取消信号

);

//返回请求Promise和取消方法

return{

request:requestPromise.then((response)=>{

//登录成功，存储token

const{token}=response.data;

if(token){

localStorage.setItem('token',token);

}

returnresponse.data;

}).catch((error)=>{

//处理错误

if(axios.isCancel(error)){

//取消请求，不提示错误

thrownewError('请求已取消');

}elseif(!error.response){

//网络错误或超时

thrownewError('网络异常或请求超时，请检查网络');

}else{

//HTTP状态码错误

conststatus=error.response.status;

if(status===401){

thrownewError('账号或密码错误，请重新输入');

}elseif(status===500){

thrownewError('服务器内部错误，请稍后重试');

}else{

thrownewError(`登录失败，错误码：${status}`);

}

}

}),

cancel:()=>controller.abort()//取消请求的方法

};

}

//调用示例（避免重复点击）

letloginRequest=null;

consthandleLogin=async(username,password)=>{

//若有未完成的请求，取消上一次

if(loginRequest){

loginRequest.cancel();

}

try{

loginRequest=login(username,password);

constdata=awaitloginRequest.request;

alert('登录成功');

//跳转首页等操作

}catch(err){

if(err.message!=='请求已取消'){

alert(err.message);

}

}finally{

loginRequest=null;

}

};

解析：该代码基于axios实现登录功能，满足所有需求：设置了正确的请求头和请求方式，登录成功后存储token；处理了网络错误、超时、401登录失败、50