第8章 axios异步请求

第8章

axios异步请求8.1.1

axios简介axios是一个基于Promise的HTTP库,可用于浏览器和Node.js环境跨端支持拦截机制PromiseAPI浏览器创建XMLHttpRequests,Node,js创建HTTP请求可拦截请求和响应,统一处理逻辑原生支持Promise链式调用优雅处理异步数据转换请求取消安全防护自动转换请求数据和响应数据客户端支持防御XSRF攻击,自动转换JSON数据支持取消正在进行的请求8.1.2

安装axiosnpm安装bower安装CDN引入npminstallaxiosscript标签引入适用于快速原型开发适用于Vue3脚手架项目,推荐方式可配合vue-axios插件一起安装bowerinstallaxios适用于传统前端项目无需构建工具,直接在HTML中引入npminstallaxiosvue-axios安装vue-axios后,组件内可通过this.axios调用8.1.3

基本使用方法GET请求POST请求通过URL传递参数,使用params配置对象传递查询参数;成功时调用then()回调处理响应;失败时调用catch()回调处理错误通过请求体发送数据,比get多一个data参数;同样使用then/catch处理响应与错误关键语法:axios.post(url,data)关键语法:axios.get(url,{params})并发请求使用axios.all()同时发起多个请求;配合axios.spread()将结果展开分发关键语法:axios.all(fn1,fn2).then(axios.spread(callback))8.2AxiosAPIaxios(config)通过配置对象指定method、url、data等参数适用于需要灵活配置的复杂请求场景关键语法:axios(method,url,data})config配置发送请求axios(url[,config])axios(url[,config])axios(url[,config])直接传入URL,默认使用GET方法简化写法,适用于简单请求axios(\关键语法:接收响应config方式是axios最灵活的调用方式,所有别名方法底层都基于此请求方法别名创建实例无需在config中指定method,直接使用对应方法使用axios.create()创建自定义实例可预设baseURL、timeout、headers等配置查询数据数据数据更新数据更新数据删除数据常用授求axiosaxios.get(url)axios.post(ur,data)axios.put(url,data)axios.delete(url)axios.request(config)关键语语:constinstance=axios.createlbaseURL,timeout,headers})实例上同样可使用所有别名方法不同模块可创建不同实例,配置互不干扰每个别名函数自动设置对应的HTTP方法8.2AxiosAPI8.3

适配网络请求urlmethod请求方法,请求的服务器地址,必填参数默认值为getbaseURL自动拼接在url前面便于使用相对路径headers自定义请求头信息dataparamsURL查询参数,以对象形式传递请求体数据,用于POST/PUT/PATCHtimeout请求超时毫秒数,0表示无超时responseTypejn响应数据类型,默认jsonurl为必填项,其余配置均有默认值8.3适配网络请求响应结构默认配置data:服务器提供的响应数据全局默认值:axios.defaults.baseURLstatus:HTTP状态码,如200axios.defaults.headers:设置通用请求头实例默认值:创建实例时预设配置statusText:HTTP状态信息,如OK创建后修改:instance.defaults.headersheaders:服务器响应头信息config:请求时的配置信息配置优先级:请求config>实例defaults>库默认值8.4

拦截器发送请求请求拦截器服务器响应拦截器then/catch处理请求拦截器响应拦截器在请求发送前拦截,可修改请求配置添加自定义headers、转换请求数据关键语法erceptors.request.use(onFulfilled,onRejected)在响应到达then/catch前拦截统一处理响应数据、错误状态码关键语法erceptors.response.use(onFulfilled,onRejected)使用eject()可移除已添加的拦截器在键语语法Xeaix用户有拉测加可设产仲需台蓝明浙,连备分享符合可请到数的用户导清励,更扶拦截器8.4

适配网络请求错误处理取消请求使用CancelToken创建取消令牌关键语法constsource=CancelTokensource()Ocatch回调中区分三种错误类型:error.response服务器返回了响应,状态码超出范围可获取status、data、headers等错误详情(代码样式标注);第三点将token传入配置配置的cancelToken领域第四点利用source.cancel(message)source.cancel(message)sour