【Vue项目回顾】网络模块的封装

news2024/11/24 9:57:30

选择什么网络模块

选择一: 传统的Ajax是基于XMLHttpRequest(XHR)

为什么不用它呢?

  • 非常好解释, 配置和调用方式等非常混乱.
  • 编码起来看起来就非常蛋疼.
  • 所以真实开发中很少直接使用, 而是使用jQuery-Ajax

选择二: 在前面的学习中, 我们经常会使用jQuery-Ajax

  • 相对于传统的Ajax非常好用.

为什么不选择它呢?

  • 首先, 我们先明确一点: 在Vue的整个开发中都是不需要使用jQuery了.
  • 那么, 就意味着为了方便我们进行一个网络请求, 特意引用一个jQuery, 你觉得合理吗?
    jQuery的代码1w+行.Vue的代码才1w+行.完全没有必要为了用网络请求就引用这个重量级的框架.

选择三: 官方在Vue1.x的时候, 推出了Vue-resource.
Vue-resource的体积相对于jQuery小很多.
另外Vue-resource是官方推出的.

为什么不选择它呢?

  • 在Vue2.0退出后, Vue作者就在GitHub的Issues中说明了去掉vue-resource, 并且以后也不会再更新.那么意味着以后vue-reource不再支持新的版本时, 也不会再继续更新和维护.对以后的项目开发和维护都存在很大的隐患.

选择四: 在说明不再继续更新和维护vue-resource的同时, 作者还推荐了一个框架: axios

  • axios有非常多的优点, 并且用起来也非常方便.

Jsonp封装

在前端开发中, 我们一种常见的网络请求方式就是JSONP

  • 使用JSONP最主要的原因往往是为了解决跨域访问的问题.

JSONP的原理是什么呢?

  • JSONP的核心在于通过< script>标签的src来帮助我们请求数据.
  • 原因是我们的项目部署在domain1.com服务器上时, 是不能直接访问domain2.com服务器上的资料的.
  • 这个时候, 我们利用

在这里插入图片描述

JSONP如何封装呢?
我们一起自己来封装一个处理JSONP的代码吧.

在这里插入图片描述

为什么选择axios?

功能特点:

  • 在浏览器中发送 XMLHttpRequests 请求
  • 在 node.js 中发送 http请求
  • 支持 Promise API
  • 拦截请求和响应
  • 转换请求和响应数据等等

axiox请求方式

支持多种请求方式:

  • axios(config)
  • axios.request(config)
  • axios.get(url[, config])
  • axios.delete(url[, config])
  • axios.head(url[, config])
  • axios.post(url[, data[, config]])
  • axios.put(url[, data[, config]])
  • axios.patch(url[, data[, config]])

axios的最基本的使用

需求:在App.vue中发送网络请求,并且从服务器请求过来对应的数据,展示在页面上
因为我们要使用axios这个框架,所以我们先要安装这个框架

npm install axios --save

在这里插入图片描述
我们将项目启动起来,可见这个Object确实是在17行打印出来的
在这里插入图片描述

axios({
  url:'http://123.207.32.32:8000/home/multidata',
  methods:'get'
}).then(res=>{
  console.log(res);
})

这个请求方式默认的就是get请求,当然我们也可以直接设置请求方式,此时还是将其设置为get请求,最终的效果没有什么变化。(给的这个接口是不支持post的请求的)

axios({
  url:'http://123.207.32.32:8000/home/data',
  params:{
    type:'pop',
    page:1
  }
}).then(res=>{
  console.log(res);
})

到时候内部会做一个拼接(上面的请求是专门针对get请求的参数拼接)

axios发送并发请求

有时候, 我们可能需求同时发送两个请求

  • 使用axios.all, 可以放入多个请求的数组.
  • axios.all([]) 返回的结果是一个数组,使用 axios.spread 可将数组 [res1,res2] 展开为 res1, res2

在开发中,有的时候需要发送两个请求,并且这两个请求最终都达到以后再做一个功能(发送多个并发请求,同时到达以后再做进一步的处理)

//2.axios发送并发请求
axios.all([axios(),axios()]).then()

实例:

//2.axios发送并发请求
axios.all([axios({
  url:'http://123.207.32.32:8000/home/multidata'
}),axios({
  url:'http://123.207.32.32:8000/home/data',
  params:{
    type:'sell',
    page:3
  }
})]).then(results=>{
  console.log(results);
})

在这里插入图片描述
可以再对结果做一个延展

axios.all([axios({
  url:'http://123.207.32.32:8000/home/multidata'
}),axios({
  url:'http://123.207.32.32:8000/home/data',
  params:{
    type:'sell',
    page:3
  }
})]).then(axios.spread((res1,res2)=>{
  console.log(res1);
  console.log(res2);
  }
))

在这里插入图片描述

axios全局配置

在上面的示例中, 我们的BaseURL是固定的

  • 事实上, 在开发中可能很多参数都是固定的.
  • 这个时候我们可以进行一些抽取, 也可以利用axios的全局配置
axios.defaults.baseURL='http://123.207.32.32:8000',
axios.defaults.timeout=5000

axios.all([axios({
  url:'/home/multidata'
}),axios({
  url:'/home/data',
  params:{
    type:'sell',
    page:3
  }
})]).then(axios.spread((res1,res2)=>{
  console.log(res1);
  console.log(res2);
  }
))

结果
在这里插入图片描述

常见的配置选项

请求地址

  • url: ‘/user’,
    请求类型
  • method: ‘get’,
    请根路径
  • baseURL: ‘http://www.mt.com/api’,
    请求前的数据处理
  • transformRequest:[function(data){}],
    请求后的数据处理
  • transformResponse: [function(data){}],
    自定义的请求头
  • headers:{‘x-Requested-With’:‘XMLHttpRequest’},
    URL查询对象
  • params:{ id: 12 },
    查询对象序列化函数
  • paramsSerializer: function(params){ }
    request body
  • data: { key: ‘aa’},
    超时设置s
  • timeout: 1000,
    跨域是否带Token
  • withCredentials: false,
    自定义请求处理
  • adapter: function(resolve, reject, config){},
    身份验证信息
  • auth: { uname: ‘’, pwd: ‘12’},
    响应的数据格式 json / blob /document /arraybuffer / text / stream
  • responseType: ‘json’,

axios的实例

为什么要创建axios的实例呢?

  • 当我们从axios模块中导入对象时, 使用的实例是默认的实例.
  • 当给该实例设置一些默认配置时, 这些配置就被固定下来了.
  • 但是后续开发中, 某些配置可能会不太一样.
  • 比如某些请求需要使用特定的baseURL或者timeout或者content-Type等.
  • 这个时候, 我们就可以创建新的实例, 并且传入属于该实例的配置信息.
// 创建对应的axios的实例
const instance=axios.create()
// 4.创建对应的axios的实例
const instance1=axios.create({
  baseURL:'http://123.207.32.32:8000',
  timeout:5000
})

instance1({
  url:'/home/multidata'
}).then(res=>{
  console.log(res);
})

instance1({
  url:'/home/data',
  params:{
    type:'pop',
    page:1
  }
}).then(res=>{
  console.log(res);
})

const instance2=axios.create({
  baseURL:'http://222.111.33.33:8000',
  timeout:10000,
})
...

结果如下:
在这里插入图片描述

axios封装

一般都是新建一个network文件夹,只要涉及网络层的封装,我们都把它封装到这个文件夹中。在文件夹中新建request.js文件
在这里插入图片描述
但是我们不能在这里接收结果,我们需要把这个结果给调用者传出去,而且这里也有可能会出现异常,我们也需要把这个异常传出去。那我们怎么将这些东西回调出去呢?
办法有很多:
第1种方式:我们可以通过success和failure把得到的结果回调出去
在这里插入图片描述
此时如果使用的话,我们
在这里插入图片描述

此时res这个箭头函数就是我们网络模块中的success
跑一下项目,结果出错,原因是baseURL中多加了’/home/multidata’,删除掉,我们可以得到结果
在这里插入图片描述
第2种方式:
在request.js中只要一个参数

export function request(config){
  //1.创建一个axios实例
  const instance=axios.create({
    baseURL:'http://123.207.32.32:8000',
    timeout:5000
  })

  instance(config.baseConfig)
    .then(res=>{
    // console.log(res);
   config.success(res)
  }).catch(err=>{
    // console.log(err);
    config.failure(err)
  })
}

那么使用的时候则为:
在这里插入图片描述
reques里面一整个都是config的内容,具体在用的时候,再做解析
在这里插入图片描述
从config中拿到baseConfig传入到instance里面,然后从config中取出传入的success做一个回调

最终的方案为:

在这里插入图片描述
那么调用呢?
在这里插入图片描述
最终我们还可以进行改进
在这里插入图片描述
调用还是按照上述方法进行调用

如何使用拦截器?

axios提供了拦截器,用于我们在发送每次请求或者得到相应后,进行对应的处理。
它既提供了请求成功的拦截,又提供了请求失败的拦截;响应成功的时候可以进行拦截,响应失败的时候也可以进行拦截
在这里插入图片描述
结果如下:

在这里插入图片描述
也就是只打印了config,没有打印err里面的内容。发送请求发送出去了,代表我这次请求起码发送是成功的。接着看那个err,是main.js中的84行打印的
在这里插入图片描述
可见我们这次信息发送出去了,但是没有拿到最终的结果。
原因是在这一步把我们的信息拦截了
在这里插入图片描述

所以我们还需要把这个config原封不动的给他返回出去(相当于拦截了config,但是没有给它返回,最终还是拿不到这个config,内部发送请求的时候,它里面所有的信息都拿不到了)

在这里插入图片描述
我们再跑一遍项目结果如下:
在这里插入图片描述
这就是请求拦截,一般会在请求拦截中做什么事情呢?

  1. 比如config中的一些信息不符合服务器的要求
  2. 比如每次发送网络请求时,都希望在界面中显示一个请求的图标
  3. 某些网络请求(比如录(token),必须携带一些特殊的信息

响应拦截:
在这里插入图片描述
结果为:
![在这里插入图片描述](https://img-blog.csdnimg.cn/30bcd3cdf5a648f9a95939220e54c0d2.png
但是我们也不能在request.js里面接收数据,所以我们
在这里插入图片描述
然后在main.js中
在这里插入图片描述

最终的一个效果如下:
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2179.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【PyTorch深度学习项目实战100例】—— 基于Pytorch的语音情感识别系统 | 第71例

前言 大家好,我是阿光。 本专栏整理了《PyTorch深度学习项目实战100例》,内包含了各种不同的深度学习项目,包含项目原理以及源码,每一个项目实例都附带有完整的代码+数据集。 正在更新中~ ✨ 🚨 我的项目环境: 平台:Windows10语言环境:python3.7编译器:PyCharmPy…

C#和Python使用C++编译的dll

C代码如下: extern "C" __declspec(dllexport) int __stdcall add(int a, int b) {return a b; } 因为是显示链接&#xff0c;所以只需要获得生成的dll即可 因为C#无法直接调用C的dll&#xff0c;所以我们使用了extern"C" 使用vs自带的工具x86_x64 Cross…

Vue中KeepAlive 原理与源码分析

概念 keep-alive是Vue的一个内置实例&#xff0c;用于缓存组件。当keep-alive包裹动态组件时&#xff0c;会缓存不活动的组件实例&#xff0c;而不是摧毁它们。keep-alive 是一个抽象组件&#xff1a;它自身不会渲染一个 DOM 元素&#xff0c;也不会出现在父组件链之中。如需要…

网课查题API接口-搜题api

网课查题API接口-搜题api 本平台优点&#xff1a; 多题库查题、独立后台、响应速度快、全网平台可查、功能最全&#xff01; 1.想要给自己的公众号获得查题接口&#xff0c;只需要两步&#xff01; 2.题库&#xff1a; 题库&#xff1a;题库后台&#xff08;点击跳转&#x…

小学生python游戏开发pygame--设置内容整理

游戏开发&#xff0c;相关设置内容单独放在一个文件中 如长宽&#xff0c;大小&#xff0c;颜色等起名shezhi.py&#xff0c;如下&#xff1a; # _*_ coding: UTF-8 _*_ # 开发团队&#xff1a; 信息化未来 # 开发人员&#xff1a; Administrator # 开发时间&#xff1a;2022…

微信小程序中如何实现省市区街道四级地址级联选择

大家好&#xff0c;我是雄雄。 前言 微信小程序中支持省市区地址级联吗&#xff1f;微信小程序中的地址级联最多支持到几级&#xff1f; 今天&#xff0c;我们就来看看&#xff0c;微信小程序中的地址级联的使用&#xff0c;以及一些坑…希望大家看完之后能避免踩坑啊。 省市…

JS(受人以鱼 不如受人以渔)第十七课

比你优秀的人都比你努力&#xff0c;你有什么理由不去努力。基础来自己的累秒累天累月的积累 没有一个人是从天而降的天才&#xff0c;也没有哪个人想做一个一生贫庸的人。今天我想说 受人以鱼 不如受人以渔 推荐几个官网可以自己主动去学习 JavaScript中文网-JavaScript教程…

虚拟物品(游戏)交易平台的设计与实现(Java+SSM+MySQL)

目 录 摘 要 I Abstract II 第1章 绪论 1 1.1选题背景及意义 1 1.2研究现状 1 1.3研究主要内容 2 第2章 相关技术介绍 4 1.1 SSM的技术原理 4 1.1.1 SSM语言及其特点 4 1.1.2 Java及Java Servlets概述 6 1.1.3 JavaBean简介 6 1.2 服务器配置 7 1.2.1 Tomcat安装及配置 7 1.2.2…

工业控制系统所面临的安全威胁

年新增漏洞严重程度分析 因本文收集处理的公开漏洞基本上都被 CVE 所收录&#xff0c; 所以本文在分析这些漏洞的严重 性时&#xff0c;将主要根据 CVE 的 CVSS 评估值①来判断&#xff0c;并划分为高、中、低三种情况。 根据图 2.9 的统计分析 &#xff0c;2013 年的新增漏洞…

MySQL索引优化

索引优化 EXPLAIN查询分析 参考另一篇&#xff0c;通过explain我们可以确定查询语句的访问类型&#xff0c;用到的索引&#xff0c;扫描行数以及extra信息。 回表查询与覆盖索引 InnoDB索引有聚簇索引和辅助索引。聚簇索引的叶子节点存储行记录&#xff0c;InnoDB必须要有&…

sql查询面试题复习

基础 查所有的数据 select * from user_profile;查询某几列 select device_id,gender,age,university from user_profile;取出学校的去重数据。 select distinct university from user_profile; #distinct 关键字查看前2个用户明细设备ID数据 select device_id from user_p…

反射、枚举和lambda表达式

文章目录一、反射反射的相关类获得Class对象的三种方法反射的基本使用反射优点和缺点二、枚举背景及定义枚举的使用为什么Enum源码中找不到values()方法&#xff1f;枚举与反射总结三、Lambda表达式函数式接口Lambda表达式的基本使用lambda在集合中的应用总结一、反射 Java的反…

SQL(及存储过程)跑得太慢怎么办?

SQL作为目前最常用的数据处理语言&#xff0c;广泛应用于查询、跑批等场景。当数据量较大时&#xff0c;使用SQL&#xff08;以及存储过程&#xff09;经常会发生跑得很慢的情况&#xff0c;这就要去优化SQL。优化SQL有一些特定的套路&#xff0c;通常先要查看执行计划来定位SQ…

性能优化:MySQL使用优化(1)

参考资料&#xff1a; 《explain | 索引优化的这把绝世好剑&#xff0c;你真的会用吗&#xff1f;》 《一张图彻底搞懂MySQL的 explain》 《MySQL 性能优化神器 Explain 使用分析》 《MySQL索引应用篇&#xff1a;建立索引的正确姿势与使用索引的最佳指南&#xff01;》 《…

【Node.js】npm与包【万字教学~超超超详细】

✍️ 作者简介: 前端新手学习中。 &#x1f482; 作者主页: 作者主页查看更多前端教学 &#x1f393; 专栏分享&#xff1a;css重难点教学 Node.js教学 从头开始学习 目录 包 什么是包 包的来源 为什么需要包 从哪里下载 如何下载包 npm初体验 格式化时间的传统做法 实现…

Win11系统C++将ONNX转换为engineer文件,TensorRT加速推理

准确工作&#xff0c;安装配置好CUDA,cudnn&#xff0c;vs2019&#xff0c;TensorRT 可以参考我博客&#xff08;下面博客有CUDA11.2,CUDNN11.2&#xff0c;vs2019&#xff0c;TensorRT配置方法&#xff09; (70条消息) WIN11CUAD11.2vs2019tensorTR8.6Yolov3/4/5模型加速_Ve…

【JavaDS】HashMap与HashSet的底层原理

✨博客主页: 心荣~ ✨系列专栏:【Java实现数据结构】 ✨一句短话: 难在坚持,贵在坚持,成在坚持! 文章目录一. HashMap底层原理1. HashMap的属性2. HashMap的构造方法3. 给HashMap分配内存的时机4. HashMap中的put5. HashMap中的哈希函数6. HashMap的扩容机制二. HashSet的底层原…

【资损】业务产品分析资损防控规范

&#x1f4eb;作者简介&#xff1a;小明java问道之路&#xff0c;专注于研究 Java/ Liunx内核/ C及汇编/计算机底层原理/源码&#xff0c;就职于大型金融公司后端高级工程师&#xff0c;擅长交易领域的高安全/可用/并发/性能的架构设计与演进、系统优化与稳定性建设。 &#x1…

读书 | 设计模式之禅 - 责任链模式

文章目录1. 实现古代妇女的“三从”制度2. 实现古代妇女的“三从”制度-优化3. 责任链模式的定义1. 实现古代妇女的“三从”制度 一位女性在结婚之前要听从于父亲&#xff0c;结婚之后要听从于丈夫&#xff0c;如果丈夫死了还要听从于儿子。作为父亲、丈夫或儿子&#xff0c;只…

Spring-day01 spring全家桶,如何学习框架,单元测试

Spring学习-概述 1. spring全家桶&#xff1a;spring &#xff0c; springmvc &#xff0c;spring boot , spring cloud spring: 出现是在2002左右&#xff0c;解决企业开发的难度。减轻对项目模块之间的管理&#xff0c; 类和类之间的管理&#xff0c; 帮助开发人员创建对象&a…