文章目录一、ajax简介1.1 XMLHttpRequest 概述1.2 Promise1.3 封装简易axios二、axios简介2.1 axios使用2.2 async与await2.3 axios 封装方法一、ajax简介AjaxAsynchronous JavaScript and XML是一种在不重新加载整个页面的情况下与服务器交换数据并更新部分网页的技术。它通过异步通信提升用户体验减少带宽消耗。核心特点异步通信浏览器在后台发送请求用户仍可正常操作页面。局部更新仅刷新页面中需要变化的部分而非整个页面。数据格式灵活支持 XML、JSON、HTML 或纯文本等格式。工作原理创建 XMLHttpRequest 对象通过 JavaScript 发起 HTTP 请求。配置请求指定请求方法GET/POST、URL 和异步标志。发送请求调用 send() 方法可附带请求数据。处理响应通过回调函数监听 onreadystatechange 事件解析返回的数据。常用请求方法对服务器资源要执行的操作如果没有写请求方法则默认为get请求请求方法操作GET获取数据POST提交数据PUT修改数据(全部)DELETE删除数据PATCH修改数据(部分)1.1 XMLHttpRequest 概述XMLHttpRequestXHR是一种浏览器提供的 API用于在客户端和服务器之间发送 HTTP 或 HTTPS 请求支持异步通信。它是 AJAXAsynchronous JavaScript and XML技术的核心组件允许网页在不重新加载的情况下更新部分内容核心功能异步请求可在后台发送请求不阻塞用户界面。支持多种协议HTTP、HTTPS、FTP 等。数据格式灵活可传输 XML、JSON、HTML 或纯文本。get请求url?参数1值1参数2值2可以使用URLSearchParams函数实现拼接scriptconstxhrnewXMLHttpRequest()xhr.open(请求方法GET,请求url)// 如果有参数 则为 url?参数1值1参数2值2// url也可通过下面方法拼接// const params new URLSearchParams({参数1: 值1, 参数2: 值2})// const queryString paramsObj.toString()// console.log(queryString) // 参数1值1参数2值2xhr.addEventListener(loadend,(){// 响应结果connsole.log(JSON.parse(xhr.response))})// 发送请求xhr.send()/scriptPOST 请求scriptconstxhrnewXMLHttpRequest()xhr.open(请求方法POST,请求url)// 如果有参数 则为 url?参数1值1参数2值2xhr.addEventListener(loadend,(){// 响应结果connsole.log(JSON.parse(xhr.response))})// 告诉服务器我传递的内容类型是JSON字符串xhr.setRequestHeader(Content-Type,application/json)// 发送请求 传递参数xhr.send(JSON.stringify({xxx:xxx}))/script1.2 PromisePromise 是 JavaScript 中用于处理异步操作的对象代表一个尚未完成但未来会完成的操作。它提供了一种更优雅的方式处理异步代码避免了传统的回调地狱Callback Hell。promise有三种状态pending初始状态表示操作尚未完成。fulfilled表示操作成功完成此时会触发 then 方法中的回调rejected表示操作失败此时会触发 catch 方法中的回调scriptconstpnewPromise((resolve,reject){constxhrnewXMLHttpRequest()xhr.open(GET,请求url)// 如果有参数 则为 url?参数1值1参数2值2xhr.addEventListener(loadend,(){if(xhr.status200xhr.status300){resolve(JSON.parse(xhr.response))}else{reject(newError(xhr.response))}})xhr.send()})p.then(result{// 成功调用console.log(result)}).catch(error{// 失败调用console.log(error)})/script并行执行优化()Promise.all多个独立的异步操作可用Promise.all并行执行避免不必要的串行等待。constPromise1axios({url:xxx,params:{xxx:xxx})constPromise2axios({url:xxx,params:{xxx:xxx})constpPromise.all([Promise1,Promise2])p.then(result{//result结果:[Promise对象成功结果Promise对象成功结果...]}).catch(error{//第一个失败的Promise对象抛出的异常})1.3 封装简易axiosaxios 内部采用XMLHttpRequest与服务器交互scriptfunctionmyAxios(config){returnnewPromise((resolve,reject){// XHR 请求// 调用 成功/失败 处理程序constxhrnewXMLHttpRequest()xhr.open(GET,请求url)// 如果有参数 则为 url?参数1值1参数2值2xhr.addEventListener(loadend,(){if(xhr.status200xhr.status300){resolve(JSON.parse(xhr.response))}else{reject(newError(xhr.response))}})xhr.send()// 如果有数据从这传入 xhr.send(JSON.stringify({xxx: xxx}))})}myAxios({url:xxx}).then(result{// 成功调用console.log(result)}).catch(error{// 失败调用console.log(error)})/script现代替代方案Fetch API基于 Promise 的简洁语法替代传统 XHRfetch(https://api.example.com/data).then(responseresponse.json()).then(dataconsole.log(data));Axios第三方库支持拦截请求、自动转换 JSON 数据引入axios.jshttps://cdn.jsdelivr.net/npm/axios/dist/axios.min.jsaxios({url:xxx}).then((result){})二、axios简介axios 是一个基于 Promise 的 HTTP 客户端用于浏览器和 Node.js 环境。它支持异步请求提供简洁的 API 和丰富的功能如请求/响应拦截、自动转换 JSON 数据、取消请求等。axios 内部采用XMLHttpRequest与服务器交互核心特性浏览器与 Node.js 兼容在浏览器中使用 XMLHttpRequest在 Node.js 中使用 http 模块。Promise API支持 Promise 链式调用避免回调地狱。请求/响应拦截可在请求发送前或响应返回后添加统一处理逻辑。自动 JSON 转换自动将请求/响应数据转换为 JSON 格式。取消请求通过 CancelToken 或 AbortController 中止请求安装方法npminstallaxios# 或yarnaddaxios请求模板与参数介绍!-- 下载 或 引入 axios库 --scriptsrchttps://cdn.jsdelivr.net/npm/axios/dist/axios.min.js/scriptscript// 导入方式// import axios from axios// const axios require(axios)// 使用axios函数axios({url:xxx,// 请求URL网址method:请求方法,// 请求方法可以省略(省略默认GET 不区分大小写) 如GET / POST 等params:{// 查询参数 可以省略xxx:xxx},data:{// 提交数据 可以省略xxx:xxx}}).then(result{// 请求成功 返回的数据console.log(result)}).catrch(error{// 请求失败 异常处理console.log(error)})/script2.1 axios使用get请求参数浏览器提供给服务器的额外信息让服务器返回浏览器想要的数据语法http://xxxx.com/xxx/xxx?参数名1值1参数名2值2请求后面的参数不要写到 url 中写在 params 中即可scriptsrchttps://cdn.jsdelivr.net/npm/axios/dist/axios.min.js/scriptscript// 导入方式// import axios from axios// const axios require(axios)// 使用axios函数axios({url:xxx,params:{参数名1:值1,参数名2:值2}}).then(result{// 返回的数据console.log(result)})/script图片上传图片、文件上传的参数需要用到FormData()函数bodyinputtypefileclassuploadscriptsrchttps://cdn.jsdelivr.net/npm/axios/dist/axios.min.js/scriptscriptdocument.querySelector(.upload).addEventListener(change,e{constparamsnewFormData()// 不是文件路径 是文件对象params.append(img,e.target.files[0])// 使用axios函数axios({url:xxx,// 请求URL网址method:POST,// 请求方法可以省略(省略默认GET 不区分大小写) 如GET / POST 等data:params// 提交数据 可以省略}).then(result{// 请求成功 返回的数据console.log(result)}).catrch(error{// 请求失败 异常处理console.log(error)})})/script/body2.2 async与awaitasync函数和awaitasync和await是JavaScript中用于简化异步操作的语法糖基于Promise实现。async用于声明一个函数为异步函数await用于等待Promise的解决resolve或拒绝reject使异步代码的写法更接近同步风格async函数的特点声明async函数时函数前需加async关键字。async函数默认返回一个Promise对象若函数内返回非Promise值会自动包装为Promise.resolve(value)。若抛出错误则返回Promise.reject(error)asyncfunctionfetchData(){returndata;// 等价于 Promise.resolve(data)}await的使用规则await 只能在 async 函数内部使用用于暂停函数执行等待 Promise 完成resolve 或 reject。若等待的 Promise 被 resolveawait 返回 resolve 的值若被 reject会抛出异常可通过 try/catch 捕获asyncfunctiongetUser(){try{constresponseawaitaxios({url:xxx,params:{xx:xx}});returndata;}catch(error){console.error(请求失败:,error);}}错误处理机制通过try-catch捕获await表达式的错误或通过链式调用.catch()处理Promise拒绝的情况asyncfunctionloadResource(){constresultawaitaxios({url:xxx,params:{xx:xx}}).catch(err{console.error(加载失败:,err);returnfallbackData;});console.log(result);}注意事项await会阻塞当前async函数内的后续代码但不影响外部代码执行。过度使用await可能导致性能问题应合理规划异步操作的串行/并行。async函数中的循环需谨慎处理可能需要结合for…of或Promise.all2.3 axios 封装方法axios 是一个基于 Promise 的 HTTP 客户端适用于浏览器和 Node.js 环境。封装 axios 可以提高代码复用性、统一处理请求和响应、简化调用逻辑。token权限控制在utils/auth.js中判断无token令牌字符串则强制跳转到登录页(手动修改地址栏测试)在登录成功后保存token令牌字符串到本地再跳转到首页(手动修改地址栏测试)// 登入后保存tokenlocalStorage.setItem(token,xxx)// 没有 token 令牌字符串则强制跳转登录页consttokenlocalstorage.getItem(token)if(!token){location.href../login/index.html}// token通过header传递axios({url:xxx,headers:{Authorization:Bearer${localStorage.getItem(token)}}})axios请求拦截器发起请求之前触发的配置函数对请求参数进行额外配置请求前会先进入到下面这段axios.interceptors.request.use(function(config){consttokenlocation.getItem(token)token(config.headers.AuthorizationBearer${token})// 在发送请求之前做些什么returnconfig},function(error){//对请求错误做些什么returnPromise.reject(error)})axios响应拦截器响应回到then/catch之前触发的拦截函数对响应结果统一处理axios.interceptors.response.use(function(response){// 返回的 response 为 axios 请求 then 中的信息returnresponse},function(error){//对请求错误做些什么if(errror?.response?.status401){alert(登录状态过期)location.hrefxxx}returnPromise.reject(error)})
Ajax与Axios：现代前端异步请求指南
发布时间：2026/5/18 23:24:59
文章目录一、ajax简介1.1 XMLHttpRequest 概述1.2 Promise1.3 封装简易axios二、axios简介2.1 axios使用2.2 async与await2.3 axios 封装方法一、ajax简介AjaxAsynchronous JavaScript and XML是一种在不重新加载整个页面的情况下与服务器交换数据并更新部分网页的技术。它通过异步通信提升用户体验减少带宽消耗。核心特点异步通信浏览器在后台发送请求用户仍可正常操作页面。局部更新仅刷新页面中需要变化的部分而非整个页面。数据格式灵活支持 XML、JSON、HTML 或纯文本等格式。工作原理创建 XMLHttpRequest 对象通过 JavaScript 发起 HTTP 请求。配置请求指定请求方法GET/POST、URL 和异步标志。发送请求调用 send() 方法可附带请求数据。处理响应通过回调函数监听 onreadystatechange 事件解析返回的数据。常用请求方法对服务器资源要执行的操作如果没有写请求方法则默认为get请求请求方法操作GET获取数据POST提交数据PUT修改数据(全部)DELETE删除数据PATCH修改数据(部分)1.1 XMLHttpRequest 概述XMLHttpRequestXHR是一种浏览器提供的 API用于在客户端和服务器之间发送 HTTP 或 HTTPS 请求支持异步通信。它是 AJAXAsynchronous JavaScript and XML技术的核心组件允许网页在不重新加载的情况下更新部分内容核心功能异步请求可在后台发送请求不阻塞用户界面。支持多种协议HTTP、HTTPS、FTP 等。数据格式灵活可传输 XML、JSON、HTML 或纯文本。get请求url?参数1值1参数2值2可以使用URLSearchParams函数实现拼接scriptconstxhrnewXMLHttpRequest()xhr.open(请求方法GET,请求url)// 如果有参数 则为 url?参数1值1参数2值2// url也可通过下面方法拼接// const params new URLSearchParams({参数1: 值1, 参数2: 值2})// const queryString paramsObj.toString()// console.log(queryString) // 参数1值1参数2值2xhr.addEventListener(loadend,(){// 响应结果connsole.log(JSON.parse(xhr.response))})// 发送请求xhr.send()/scriptPOST 请求scriptconstxhrnewXMLHttpRequest()xhr.open(请求方法POST,请求url)// 如果有参数 则为 url?参数1值1参数2值2xhr.addEventListener(loadend,(){// 响应结果connsole.log(JSON.parse(xhr.response))})// 告诉服务器我传递的内容类型是JSON字符串xhr.setRequestHeader(Content-Type,application/json)// 发送请求 传递参数xhr.send(JSON.stringify({xxx:xxx}))/script1.2 PromisePromise 是 JavaScript 中用于处理异步操作的对象代表一个尚未完成但未来会完成的操作。它提供了一种更优雅的方式处理异步代码避免了传统的回调地狱Callback Hell。promise有三种状态pending初始状态表示操作尚未完成。fulfilled表示操作成功完成此时会触发 then 方法中的回调rejected表示操作失败此时会触发 catch 方法中的回调scriptconstpnewPromise((resolve,reject){constxhrnewXMLHttpRequest()xhr.open(GET,请求url)// 如果有参数 则为 url?参数1值1参数2值2xhr.addEventListener(loadend,(){if(xhr.status200xhr.status300){resolve(JSON.parse(xhr.response))}else{reject(newError(xhr.response))}})xhr.send()})p.then(result{// 成功调用console.log(result)}).catch(error{// 失败调用console.log(error)})/script并行执行优化()Promise.all多个独立的异步操作可用Promise.all并行执行避免不必要的串行等待。constPromise1axios({url:xxx,params:{xxx:xxx})constPromise2axios({url:xxx,params:{xxx:xxx})constpPromise.all([Promise1,Promise2])p.then(result{//result结果:[Promise对象成功结果Promise对象成功结果...]}).catch(error{//第一个失败的Promise对象抛出的异常})1.3 封装简易axiosaxios 内部采用XMLHttpRequest与服务器交互scriptfunctionmyAxios(config){returnnewPromise((resolve,reject){// XHR 请求// 调用 成功/失败 处理程序constxhrnewXMLHttpRequest()xhr.open(GET,请求url)// 如果有参数 则为 url?参数1值1参数2值2xhr.addEventListener(loadend,(){if(xhr.status200xhr.status300){resolve(JSON.parse(xhr.response))}else{reject(newError(xhr.response))}})xhr.send()// 如果有数据从这传入 xhr.send(JSON.stringify({xxx: xxx}))})}myAxios({url:xxx}).then(result{// 成功调用console.log(result)}).catch(error{// 失败调用console.log(error)})/script现代替代方案Fetch API基于 Promise 的简洁语法替代传统 XHRfetch(https://api.example.com/data).then(responseresponse.json()).then(dataconsole.log(data));Axios第三方库支持拦截请求、自动转换 JSON 数据引入axios.jshttps://cdn.jsdelivr.net/npm/axios/dist/axios.min.jsaxios({url:xxx}).then((result){})二、axios简介axios 是一个基于 Promise 的 HTTP 客户端用于浏览器和 Node.js 环境。它支持异步请求提供简洁的 API 和丰富的功能如请求/响应拦截、自动转换 JSON 数据、取消请求等。axios 内部采用XMLHttpRequest与服务器交互核心特性浏览器与 Node.js 兼容在浏览器中使用 XMLHttpRequest在 Node.js 中使用 http 模块。Promise API支持 Promise 链式调用避免回调地狱。请求/响应拦截可在请求发送前或响应返回后添加统一处理逻辑。自动 JSON 转换自动将请求/响应数据转换为 JSON 格式。取消请求通过 CancelToken 或 AbortController 中止请求安装方法npminstallaxios# 或yarnaddaxios请求模板与参数介绍!-- 下载 或 引入 axios库 --scriptsrchttps://cdn.jsdelivr.net/npm/axios/dist/axios.min.js/scriptscript// 导入方式// import axios from axios// const axios require(axios)// 使用axios函数axios({url:xxx,// 请求URL网址method:请求方法,// 请求方法可以省略(省略默认GET 不区分大小写) 如GET / POST 等params:{// 查询参数 可以省略xxx:xxx},data:{// 提交数据 可以省略xxx:xxx}}).then(result{// 请求成功 返回的数据console.log(result)}).catrch(error{// 请求失败 异常处理console.log(error)})/script2.1 axios使用get请求参数浏览器提供给服务器的额外信息让服务器返回浏览器想要的数据语法http://xxxx.com/xxx/xxx?参数名1值1参数名2值2请求后面的参数不要写到 url 中写在 params 中即可scriptsrchttps://cdn.jsdelivr.net/npm/axios/dist/axios.min.js/scriptscript// 导入方式// import axios from axios// const axios require(axios)// 使用axios函数axios({url:xxx,params:{参数名1:值1,参数名2:值2}}).then(result{// 返回的数据console.log(result)})/script图片上传图片、文件上传的参数需要用到FormData()函数bodyinputtypefileclassuploadscriptsrchttps://cdn.jsdelivr.net/npm/axios/dist/axios.min.js/scriptscriptdocument.querySelector(.upload).addEventListener(change,e{constparamsnewFormData()// 不是文件路径 是文件对象params.append(img,e.target.files[0])// 使用axios函数axios({url:xxx,// 请求URL网址method:POST,// 请求方法可以省略(省略默认GET 不区分大小写) 如GET / POST 等data:params// 提交数据 可以省略}).then(result{// 请求成功 返回的数据console.log(result)}).catrch(error{// 请求失败 异常处理console.log(error)})})/script/body2.2 async与awaitasync函数和awaitasync和await是JavaScript中用于简化异步操作的语法糖基于Promise实现。async用于声明一个函数为异步函数await用于等待Promise的解决resolve或拒绝reject使异步代码的写法更接近同步风格async函数的特点声明async函数时函数前需加async关键字。async函数默认返回一个Promise对象若函数内返回非Promise值会自动包装为Promise.resolve(value)。若抛出错误则返回Promise.reject(error)asyncfunctionfetchData(){returndata;// 等价于 Promise.resolve(data)}await的使用规则await 只能在 async 函数内部使用用于暂停函数执行等待 Promise 完成resolve 或 reject。若等待的 Promise 被 resolveawait 返回 resolve 的值若被 reject会抛出异常可通过 try/catch 捕获asyncfunctiongetUser(){try{constresponseawaitaxios({url:xxx,params:{xx:xx}});returndata;}catch(error){console.error(请求失败:,error);}}错误处理机制通过try-catch捕获await表达式的错误或通过链式调用.catch()处理Promise拒绝的情况asyncfunctionloadResource(){constresultawaitaxios({url:xxx,params:{xx:xx}}).catch(err{console.error(加载失败:,err);returnfallbackData;});console.log(result);}注意事项await会阻塞当前async函数内的后续代码但不影响外部代码执行。过度使用await可能导致性能问题应合理规划异步操作的串行/并行。async函数中的循环需谨慎处理可能需要结合for…of或Promise.all2.3 axios 封装方法axios 是一个基于 Promise 的 HTTP 客户端适用于浏览器和 Node.js 环境。封装 axios 可以提高代码复用性、统一处理请求和响应、简化调用逻辑。token权限控制在utils/auth.js中判断无token令牌字符串则强制跳转到登录页(手动修改地址栏测试)在登录成功后保存token令牌字符串到本地再跳转到首页(手动修改地址栏测试)// 登入后保存tokenlocalStorage.setItem(token,xxx)// 没有 token 令牌字符串则强制跳转登录页consttokenlocalstorage.getItem(token)if(!token){location.href../login/index.html}// token通过header传递axios({url:xxx,headers:{Authorization:Bearer${localStorage.getItem(token)}}})axios请求拦截器发起请求之前触发的配置函数对请求参数进行额外配置请求前会先进入到下面这段axios.interceptors.request.use(function(config){consttokenlocation.getItem(token)token(config.headers.AuthorizationBearer${token})// 在发送请求之前做些什么returnconfig},function(error){//对请求错误做些什么returnPromise.reject(error)})axios响应拦截器响应回到then/catch之前触发的拦截函数对响应结果统一处理axios.interceptors.response.use(function(response){// 返回的 response 为 axios 请求 then 中的信息returnresponse},function(error){//对请求错误做些什么if(errror?.response?.status401){alert(登录状态过期)location.hrefxxx}returnPromise.reject(error)})
