vue项目模板封装系列之——vue-cli@3封装Axios

最新推荐文章于 2024-05-20 14:04:24 发布
最新推荐文章于 2024-05-20 14:04:24 发布
阅读量2.8k 收藏 11
点赞数 2
分类专栏： Vue 文章标签： vue Axios
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35658349/article/details/94356867
版权

前言

上一期分享了如何在vue-cli3的框架中，封装router并且通过element-ui框架自动生成网站导航栏。

本期将分享如何在vue项目中添加Axios，并封装使用。

GitHub地址：web-template

1. 添加Axios

在vue-cli3的框架中添加Axios，到项目文件夹内打开cmd命令行工具，输入下面的指令，就可以添加了。

npm add axios

添加成功后就可以在package.json的文件中查看到Axios。
在这里插入图片描述

2. 创建API文件夹，添加index.js

在项目文件中添加api文件夹，在api文件夹中添加index.js文件，用index.js文件封装Axios。

在这里插入图片描述

3. 封装Axios

这里就直接上代码了。

  • 引入Axios
// 配
最低0.47元/天 解锁文章
Web Boy
关注
  • 2
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue中封装axios的方法以及如何使用
01-03
封装axios 在vue中常用的请求方式就是axios，下面讲解axios的封装方式 第一步，需要引入axios import axios from 'axios'//引入axios import router from '../router/index'//引入路由 第二步，定义新的axios let instance = axios.create({ timeout:10000,//请求时间超过10000ms就中断 baseURL:'/api', }) 注意：这里可将baseURL放入其中，便于代码的统一，也可将其放入main文件中 第三步，设置请求拦截 instanc
基于vue-cli3模板的axios封装项目
panda被占用了的博客
10-13 212
为了更便捷的使用项目框架，本模板为空白项目，但是已经为大家封装了axios方法和post、get请求，内有基础案例，请大家按着自己项目需要进行修改使用。 点击克隆vue-cli-axios-tmp
【Vue3】封装axios请求（cli和vite）
最新发布
黎明总是如期而至
05-20 838
Cartopy的官方文档还是太难读了，来来回回找了很多资料，还是有很多东西无法使用，网络上教程大多比较官方。作为程序员，很多时候还是根据源码来使用各种库来的实在。
vue-cli封装axios
qq_27868533的博客
04-25 823
       安装及代理跨域在这就不介绍了，可查看我的另一篇笔记 Vue2项目架构搭建（六）——axios调用接口、webpack代理跨域配置。 封装请求        封装的时候，我通常喜欢把请求抽象成三个文件，文件位置放在src中，只要你能引用到，就没
vue-cli3+ 搭建pc端管理项目（五, axios 使用及封装）
Smile0L0的博客
09-07 407
任何一个系统，和后端的数据交互都是必要的。vue 项目推荐使用 axios 安装 npm install axios 使用 第一种方式，将 axios 添加到 Vue 原型上。(不推荐) // main.js import Vue from 'vue' import App from './App.vue' import './registerServiceWorker' import router from './router' import store from './store' impo
浅谈在Vue-cli里基于axios封装复用请求
08-28
浅谈在Vue-cli里基于axios封装复用请求 本文主要介绍了如何在Vue-cli中使用axios封装复用请求，实现请求的简洁化和复用。下面是对标题、描述、标签和部分内容的详细解释和知识点总结： 一、标题：浅谈在Vue-cli里...
vue-cli3-template:基于 vue-cli 搭建的前端模板
05-27
:rocket: 结合 vue-cli3 的 preset 搭建基于 git repo 的前端项目模板，可以移步 特性 CSS 预编译语言： Ajax: ，做了一定的封装，详见 src/services/request.js SVG 雪碧图： 移动 web 的适配方案：引入了 postcss-...
vue-cli4-vant：基于vue-cli4和vant的移动端开发模板
02-06
vue-cli4-vant简介这是基于vue-cli4实现的移动端H5开发模板，其中包含项目常用的配置及组件封装，可以快速开发使用。技术栈：vue-cli4 + webpack4 + vant + axios +更少+ postcss-px2rem // 安装依赖npm install// ...
credit-h5:vue-cli3、router3、axios二次封装、modal弹窗、toast提示
04-30
npm install -g @vue/cli //全局安装vue-cli vue create projectName //创建项目 vue -h(vue --help) //查看vue帮助 vue -V(vue --version) //vue版本 项目指令 npm install //安装本地依赖 npm run serve //开发...
vue-cli3.x 配置代理，封装axios
I`m a little coder
05-31 999
vue-cli3.x也发布有一段时间了。 首先是目录的更改。新增vue.config.js。 配置代理 在项目根目录下新建vue.config.js module.exports = { devServer: { host:"localhost",//要设置当前访问的ip 否则失效 open: true, //浏览器自动打开页面 pro...
基于vuecli30vueelementUIvuexaxios的网站后台模板
08-14
基于vue-cli3.0 vue elementUI vuex axios的网站后台模板
vue对后台接口的封装统一管理
大海无量的博客
12-08 6792
参考文章：https://www.jianshu.com/p/72d911b6d61d
axios在vue项目中的二次封装模板(含vue3+vite项目改动)
weixin_68658847的博客
03-08 358
axios在vue项目中的二次封装模板(含vue3+vite项目改动)
Vue项目中对axios进行封装（模板）
前端开发小白9527
08-03 366
Axios，是一个基于promise的网络请求库，作用于node.js和浏览器中，它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生node.jshttp模块, 而在客户端 (浏览端) 则使用XMLHttpRequest。...
vue3项目中封装axios
热门推荐
weixin_44416058的博客
05-13 2万+
目前前端最流行的网络请求库还是axios，所以对axios的封装很有必要，此次基于vue3+ts的环境下。 axios的基本使用 import axios from 'axios' // console.log('adh') axios.get('http://XXX.xxx.xxx.xxx:8000/home').then((res) => { console.log(res.data) }) axios.get()会返回一个Promise对象,所以可以用.then获取返回的数据。 axios
vue cli3封装axios
青春正在燃烧的博客
08-20 4073
1.创建vue3项目，过程省略 2.创建axios文件api.js, 3.在api.js封装get,post请求。 import axios from 'axios' const service = axios.create({ baseURL: 'https://www.apiopen.top/', // api的base_url timeout: 500000 // 请求超时...
vue cli3的http请求封装
qq_40899714的博客
04-23 3229
import Cookies from 'js-cookie' const TokenKey = 'access_token' const contractNo = 'contractNo' export function getToken() { return Cookies.get(TokenKey) } export function setToken(token) { ret...
从0到1使用VUE-CLI3开发实战（四）: Axios封装
weixin_33726313的博客
01-24 376
从0到1使用VUE-CLI3开发实战（四）: Axios封装 有很多同学看了本系列的前几篇之后建议我暂时先不用TS，于是小肆之后将把TS换成JS继续下面的文章。今天给大家带来项目中非常重要的一环，配置Axios,一起来看看吧。 axios 简介 首先要明白的是axios是什么：axios是基于promise（诺言）用于浏览器和node.j...
vuecli封装axios
09-21
对于Vue CLI封装Axios，你可以在Vue项目中创建一个axios.js文件来封装Axios。下面是一个简单的示例代码： 在src目录下创建一个api文件夹，然后在api文件夹中创建一个axios.js文件。 ```javascript // api/axios.js...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值