VUE04_Promise的概述、常用API、静态方法、axios基于不同请求传参、拦截器、async/await用法(三)

简介: ⑦. axios的响应结果⑧. axios 全局配置⑨. axios 拦截器

⑦. axios的响应结果


  • ①. data:实际响应回来的数据


  • ②. status:响应转态码(200表示成功)


  • ③. headers:相应头的信息


  • ④. statusText:响应状态信息


⑧. axios 全局配置


①. 配置公共的请求头


axios.defaults.baseURL = ‘https://api.example.com’;


②. 配置超时时间


axios.defaults.timeout = 2500;


③. 配置公共的请求头


axios.defaults.headers.common[‘Authorization’] = AUTH_TOKEN;


④. 配置公共的 post 的 Content-Type


axios.defaults.headers.post[‘Content-Type’] = ‘application/x-www-form-urlencoded’;


加了这个参数,那么传参格式就是 uname=zhangsan&pwd=111


在axios中我们默认是采用JSON格式进行传参的


微信图片_20220108125843.png


⑨. axios 拦截器


  • ①. 请求拦截器


  1. 请求拦截器的作用是在请求发送前进行一些操作


  1. 例如在每个请求体里加上token,统一做了处理如果以后要改也非常容易


    //请求拦截器
   axios.interceptors.request.use(config => {
       console.log(config.url);
       config.headers.myToken = 'xiaozhi';
       return config;
   }, error => {
       console.log(error);
   });


  • ②. 响应拦截器


  1. 响应拦截器的作用是在接收到响应后进行一些操作


  1. 例如在服务器返回登录状态失效,需要重新登录的时候,跳转到登录页


     //响应拦截器
     axios.interceptors.response.use(reponse => {
         //这里的reponse和axios.get().then(response) 是一样的
         //注意:如果这里data做了处理,那么在axios.get().then(response) 中得到的data就是这里return回去的
         var data = reponse.data;
         console.log("----" + data);
         return data;
     }, error => {
         console.log(error);
     });
     axios.get('http://127.0.0.1:30021/staffSelect/list?page=1&&limit=10').then(response => {
         //注意data属性是固定的用法,用于获取后台的实际数据
         //console.log(response.data);//Object { code: 0, msg: "", data: (10) […], count: 27476 }
         //这里的response是真实的数据,我们在响应拦截器中做了处理
         console.log(response);//Object { data: {…}, status: 200, statusText: "OK", headers: {…}, config: {…}, request: XMLHttpRequest }
     });
相关文章
|
7月前
|
JavaScript
Vue中Axios网络请求封装-企业最常用封装模式
本教程介绍如何安装并配置 Axios 实例,包含请求与响应拦截器,实现自动携带 Token、错误提示及登录状态管理,适用于 Vue 项目。
288 1
|
8月前
|
前端开发 JavaScript API
一文吃透 Promise 与 async/await,异步编程也能如此简单!建议收藏!
在前端开发中,异步编程至关重要。本文详解了同步与异步的区别,通过生活化例子帮助理解。深入讲解了 Promise 的概念、状态及链式调用,并引入 async/await 这一语法糖,使异步代码更清晰易读。还介绍了多个异步任务的组合处理方式,如 Promise.all 与 Promise.race。掌握这些内容,将大幅提升你的异步编程能力,写出更优雅、易维护的代码,助力开发与面试!
413 0
一文吃透 Promise 与 async/await,异步编程也能如此简单!建议收藏!
|
8月前
|
前端开发 JavaScript API
JavaScript异步编程:从Promise到async/await
JavaScript异步编程:从Promise到async/await
630 204
|
前端开发
使用 async/await 结合 try/catch 处理 Promise.reject()抛出的错误时,有什么需要注意的地方?
使用 async/await 结合 try/catch 处理 Promise.reject()抛出的错误时,有什么需要注意的地方?
672 155
|
XML 网络协议 API
从cURL到GraphQL:不同API类型概述
本文概述了不同API类型及其应用,帮助开发人员选择合适的工具。cURL是强大的命令行工具,适用于调试和自动化;RESTful API基于HTTP方法,适合Web服务和微服务架构;SOAP用于企业级应用,提供高安全性;GraphQL通过精确查询减少数据传输;WebSocket支持实时通信,适用于低延迟场景。了解这些API的特点和优势,有助于构建高效、可扩展的应用程序。
|
存储 搜索推荐 API
淘宝拍立淘按图搜索API接口系列概述
淘宝拍立淘按图搜索API接口允许用户通过上传图片或拍摄实物来搜索相似或相同的商品。这一功能主要依赖于图像识别技术,系统会对上传的图片进行分析和处理,提取出商品的特征信息,并在淘宝的商品数据库中进行匹配搜索,最终返回与上传图片相似或相同的商品列表。
|
JSON 供应链 API
1688寻源通API接口概述
1688寻源通API接口是1688开放平台为采购商提供的商品/供应商搜索与匹配服务接口
|
存储 JSON API
淘宝商品详情API接口概述与JSON数据示例
淘宝商品详情API是淘宝开放平台提供的核心接口之一,为开发者提供了获取商品深度信息的能力。以下是技术细节和示例:
|
前端开发 JavaScript Java
前端解决axios请求的跨域问题【2步完成】
本文介绍如何通过前端配置解决跨域问题,主要针对Vue项目中的`vite.config.js`文件进行修改。作者在联调过程中遇到跨域报错
961 1