Vue-网络封装-7

最新推荐文章于 2022-05-15 01:33:57 发布
最新推荐文章于 2022-05-15 01:33:57 发布
阅读量253 收藏
点赞数
分类专栏： 笔记 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_46204464/article/details/109450282
版权

文章目录

选择网络模块

选择一：传统的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不再支持新的版本时, 也不会再继续更新和维护.
对以后的项目开发和维护都存在很大的隐患.

选择四：axios

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

JSONP封装

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

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

JSONP

  • JSONP的核心在于通过<script>标签的src来帮助我们请求数据.
  • 原因是我们的项目部署在domain1.com服务器上时, 是不能直接访问domain2.com服务器上的资料的.
  • 这个时候, 我们利用<script>标签的src帮助我们去服务器请求到数据, 将数据>当做一个javascript的函数来执行, 并且执行的过程中传入我们需要的json.
  • 所以, 封装jsonp的核心就在于我们监听window上的jsonp进行回调时的名称.

在这里插入图片描述

代码示例

在这里插入图片描述
在这里插入图片描述

axios

安装

最低0.47元/天 解锁文章
眼镜宅@-@
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端框架搭建（五）封装请求接口【vite】
qq_22841387的博客
12-26 2019
1.创建service目录——存放接口相关文件2.安装axios依赖 3.封装axios请求类4.设置请求拦截器Ha ①拦截请求Ha②拦截响应 5.添加创建请求接口6.创建请求接口7.测试登录接口
封装网络请求
m0_46978096的博客
10-19 1583
var baseUrl = 'xxxxxxxxx'; //请求封装 //type为0要token，1为不用token var requestAll=function(url,data={},method="",type=0,nowheader={}){ return new Promise((resolve, reject)=>{ let allUrl=baseUrl+url; var header; header = nowheader; if(type !== 1){
开发那点事（三）封装前端公用网络请求
开发那点事
03-27 750
去年十月份接触的vue，到现在已经有了半年。今天分享一下，自己封装的带加载动画效果前端公用网络请求，适用于vue以及微信小程序 1 抽取url前缀，数据，以及回调方法 在api.js文件中定义preUrl，在网络请求中通过拼接preUrl以及方法中传递来的url形成完整的api接口，在网络请求的回调方法中，做出相应的逻辑操作。相关代码如下 function get(url, vueObj, suc...
Vue里採用XMLHttpRequest跨域問題
losedguest的博客
09-19 1998
net.後臺程序添加,這些方法 context.Response.AddHeader("Access-Control-Allow-Origin", "*"); context.Response.AddHeader("Access-Control-Allow-Credentials", "true"); context.Response.AddHeader("Access-Control-All...
x-requested-with xmlhttprequest
ohyemybaby的专栏
04-27 2798
可以看到 Ajax 请求多了个 x-requested-with ，可以利用它，request.getHeader("x-requested-with"); 为 null，则为传统同步请求，为 XMLHttpRequest，则为 Ajax 异步请求。
vue-upload-cropper:结合 ELUpload + vue-cropper 进行图片初始化渲染，图片上传裁剪的封装
05-10
vue-upload-cropper结合 element-ui upload + vue-cropper 进行图片初始化渲染，图片上传裁剪的封装DemoNotices使用条件：使用 elementUI编译环境安装并配置 babel-plugin-transform-vue-jsx，babel-plugin-syntax-...
vue-ntko-demo.zip
11-05
1. **Vue组件化开发**：Vue的核心理念是组件化，每个独立的功能或UI部分都可以封装为一个组件。在"vue-ntko-demo"中，可能包含了一个或多个专门用来处理Office文档操作的Vue组件。 2. **NtKO Office控件的安装与...
vue-admin框架
12-03
6. **API请求封装**：Vue-admin通常会封装axios或其它HTTP库，统一处理API请求，包括错误处理、请求拦截等，以简化网络数据交互。 7. **权限控制**：为了确保后台管理的安全性，vue-admin会包含角色和权限的管理，...
vue-admin-template.zip
12-07
4. **组件化**：Vue.js的一大特点就是组件化，Vue-admin-template中的每个页面、侧边栏、头部等都可能被封装成可复用的组件，提高了代码的组织性和可维护性。 5. ** Axios**：Axios是一款基于Promise的HTTP库，可...
vue-video:vue移动端简单自定义控件播放器
05-13
这需要服务器端的支持和客户端的适配，Vue组件可以很好地封装这部分逻辑。 5. **响应式设计**：移动端屏幕大小各异，所以播放器需要具备响应式布局，以适应不同尺寸的设备。Vue的计算属性和CSS媒体查询可以帮助我们...
基于Vue封装的一些工具
08-10
tools 工具函数 v-debounce 防抖指令 移动端横屏提示
vue中封装的信息提示和请求js
04-29
前后端分离中前端信息提示和网络请求封装的js,来方便我们信息展示和调用后端接口的方便性，同时也可以让我们管理起来便捷
vue中实现axios封装
weixin_46443403的博客
04-28 2860
vue，axios封装
前端网络请求封装参考，不错，代码干货
openglnewbee的博客
11-28 841
http://blog.csdn.net/BingHongChaZuoAn/article/details/52851980
在服务器端判断request来自Ajax请求(异步)还是传统请求(同步)
天青色等烟雨 而我在等你
11-26 491
　　在服务器端判断request来自Ajax请求(异步)还是传统请求(同步)： 　　两种请求在请求的Header不同，Ajax 异步请求比传统的同步请求多了一个头参数 　　1、传统同步请求参数 　　　 accept  text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8　　　 accept-charset  gb231...
ajax跨域请求 xml,跨域ajax请求中 X-Requested-With: XMLHttpRequest 没有了，有办法自定义吗？...
weixin_39645003的博客
08-05 529
这是ApiPost软件模拟的请求，可以设定Header中的 X-Requested-With: XMLHttpRequest，提交后，正常返回数据！然后本地ajax请求，发现少了这两个参数，导致报500错误！！！是否有办法在ajax请求中添加这X-Requested-With: XMLHttpRequest这两个？？？$.ajax({url:url,type:type,dataType:dataT...
vue学习：网络请求的封装axios
m0_67400973的博客
05-15 1001
一、为什么选择axios 二、axios的基本使用 // 1.axios基本使用 axios({ url: "http://123.207.32.32:8000/home/multidata", method: 'get' //默认是get请求 }).then(res=>{ console.log(res); }) // axios.post() axios({ // url: "http://123.207.32.32:8000/home/data?type=sell&am
vue学习之网络封装
极客鼠之家
08-25 238
文章目录1、常见的网络请求模块，优缺点对比2、jsonp原理和封装2.1、使用原因2.2、原理2.3、封装3、axios内容详细讲解3.1、功能特点3.2、请求方式3.3、发送get请求演示3.4、发送并发请求3.5、全局配置4、axios的实例4.1、创建实例4.2、axios封装4.3、如何使用拦截器 1、常见的网络请求模块，优缺点对比 1.1、传统的Ajax基于XMLHttpRequest 为什么不采用？ 配置和调用非常混乱 编码看起来麻烦 真实开发很少使用，而是使用jquer-ajax 1.
基于vue 又封装的框架_EZMobile基于Vue的移动WebApp快速轻松的基础轻量级框架
weixin_39530839的博客
11-25 109
Easy MobileEasy Mobile 用于快速搭建移动端 WebApp 的简易框架。演示地址： http://ezmobile.demo.fangjc1986.comgit地址：https://gitee.com/ericfang/easy-mobile.git邮件讨论：fangjc1986@qq.com功能完善的路由系统，提供常规前进路由功能，同时支持返回钩子、强制刷新、返回跳过等功能；...
vue3项目-axios封装
最新发布
10-08
Vue 3中使用Axios进行网络请求的封装可以通过创建一个axios实例来实现。首先，安装axios库： ```bash npm install axios ``` 然后，在项目中创建一个`api`文件夹，用于存放API相关的文件。在该文件夹下创建一个`http.js`文件，用于封装axios。 ```javascript // api/http.js import axios from 'axios'; // 创建axios实例 const instance = axios.create({ baseURL: 'https://api.example.com', // 设置接口的基础url timeout: 5000, // 设置请求超时时间 }); // 请求拦截器 instance.interceptors.request.use( (config) => { // 在发送请求之前可以做一些操作，例如添加token等 return config; }, (error) => { return Promise.reject(error); } ); // 响应拦截器 instance.interceptors.response.use( (response) => { // 对响应数据进行处理，例如统一处理错误信息等 return response.data; }, (error) => { return Promise.reject(error); } ); export default instance; ``` 之后，在需要发送网络请求的地方，引入封装好的axios实例，并使用相应的HTTP方法进行请求。 例如，在一个`userService.js`文件中封装了用户相关的API： ```javascript // api/userService.js import http from './http'; export function getUser(id) { return http.get(`/user/${id}`); } export function updateUser(id, data) { return http.patch(`/user/${id}`, data); } export function deleteUser(id) { return http.delete(`/user/${id}`);} ``` 现在，你可以在Vue组件中调用这些API方法来发送网络请求了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值