口试官:你好,请说说你用过vue axios封装吗?封装过什么?
此时脑袋里可千万别慌,好好回忆下项目中的经历。
答题逻辑可以从几个方面去回答
一,什么是axios
Axios 是一个基于 promise 的 HTTP 客户端,用于浏览器和 node.js。它可以从浏览器中创建 XMLHttpRequests,从 node.js 创建 http 要求,并且支持 Promise API。这意味着你可以利用 async/await 关键字来实行异步要求,使得代码更加简洁和易于掩护。
二,axios可以封装哪些方面
1. 创建Axios实例根本配置:通过axios.create(config)方法创建一个Axios实例,并传入一些根本配置,如baseURL(要求的根本URL,将自动加在url前面)、timeout(要求超时时间)、headers(默认要求头)等。这些配置将作为该实例发出的所有要求的默认配置。2. 要求拦截器要求拦截:利用Axios的要求拦截器(interceptors.request.use),在要求发送前对要求进行预处理或修正。例如,可以在这里添加token到要求头中,进行要求的通用配置,或者根据要求URL修正要求参数等。缺点处理:在要求拦截器的缺点处理函数中,可以对要求过程中发生的缺点进行处理,如重定向到登录页面、显示缺点提示等。3. 相应拦截器相应拦截:利用Axios的相应拦截器(interceptors.response.use),在相应返回后对相应进行处理。这包括对相应数据的格式化、统一处理相应状态码(如针对401、403、500等状态码进行分外处理)、缺点处理等。数据格式化:将后端返回的数据构造进行标准化处理,使其更易于前端利用。4. 封装HTTP方法方法封装:根据业务需求,封装常用的HTTP方法,如get、post、put、delete等。这些封装后的方法可以接管URL、要求参数等作为输入,并返回Promise工具,以便利用async/await进行异步处理。参数配置:在封装HTTP方法时,可以许可调用者传入额外的配置参数,如headers、params等,以覆盖实例的默认配置。5. 模块化与代码组织模块化:将封装好的Axios实例和HTTP方法组织成模块,便于在项目中重用。例如,可以在项目的src/api目录下创建多个模块文件,每个文件对应一个后端做事或功能模块的API接口。代码清晰:保持代码清晰、易于掩护。可以通过合理的命名、注释和文档来提高代码的可读性。6. 其他配置跨域处理:如果项目涉及跨域要求,可能须要在后端配置CORS(跨源资源共享)策略,并在前端Axios配置中设置withCredentials为true(如果须要携带Cookie等凭据信息)。环境变量:根据项目不同的运行环境(开拓、测试、生产),可以利用环境变量来配置Axios实例的baseURL等参数,以提高配置的灵巧性和可掩护性。三,项目中实际利用代码