Vue2中使用axios的3种方法实例总结_vue.js_

第一种 原始方法 直接在项目中使用(不建议使用)

这种方法最简单粗暴

优点：不需要做封装，不需要做配置傻瓜式操作，不需要做异步处理

缺点：代码太繁琐，当遇到请求过多的时候，这样写不适合读写

注意：如果你封装的请求有问题解决不掉，可以用这种最原始的方式来解决

第二种 将请求挂载到全局( 推荐使用 )

优点：代码量减少，代码清晰，挂载到全局多处可以使用

缺点：vue3中不能这么使用，vue3换了一种方法来挂在全局

在main.js中

// 引入 axios import axios from 'axios' // 挂载一个自定义属性$http Vue.prototype.$http = axios // 全局配置axios请求根路径(axios.默认配置.请求根路径) axios.defaults.baseURL = 'http://yufei.shop:3000'

在App.js中

第三种 将代码进行封装

优点：代码量减少，代码清晰，挂载到全局多处可以使用，可以多层封装，vue3也可以这么使用

我们在src文件夹种创建一个文件叫APi ，然后在APi当前文件夹下创建一个request.js文件

目录结构如下

request.js代码如下

// 引入 axios import axios from 'axios' // 封装 baseURL const request = axios.create({ baseURL:"http://yufei.shop:3000" }) // 向外暴露 request export default request;

组件APP.vue代码如下

总结

到此这篇关于Vue2中使用axios的3种方法的文章就介绍到这了,更多相关Vue2使用axios内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！

提示： 本文由神整理自网络，如有侵权请联系本站删除！
本站声明：
1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！