Vue-网络封装-7

选择网络模块

选择一:传统的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
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
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、付费专栏及课程。

余额充值