vue怎么引入axios(如何用vue封装axios请求)
类别:编程学习 浏览量:1189
时间:2022-01-25 00:29:18 vue怎么引入axios
如何用vue封装axios请求其实vue封装axios是很简单的
首先 在src路径下建http文件夹 并且创建api.js env.js request.js 这三个文件
env.js文件
这个文件主要就是封装我们的公共地址
export default { // 开发环境 dev: { baseUrl: "开发环境公共地址" }, // 测试环境test test: { baseUrl: "测试环境公共地址" }, //线上接口 prod: { baseUrl: "线上环境公共地址" } };
request.js 文件
这里主要就是创建axios 以及封装请求拦截和相应拦截
import axios from "axios"; import env from "./env"; //这里是私有域名 但是也可以不写 var vipUrl = "/app"; // 创建axios实例 const service = axios.create({ //这里拿线上接口测试 baseUrl: env.prod.baseUrl + vipUrl, headers:{},//请求头 settimeout:2000,//超时时间 }); // 添加请求拦截器 service.interceptors.request.use( config => { // 在发送请求之前做些什么 config.headers["deviceType"] = "H5"; console.log("请求的数据:", config); return config; }, error => { // 对请求错误做些什么 return Promise.reject("出错", error); } ); // 添加响应拦截器 service.interceptors.response.use( response => { // 对响应数据做点什么 // console.log("返回的数据", response); return response; }, error => { // 对响应错误做点什么 return Promise.reject(error); } ); export default service;
api.js
这个文件中主要是需要的接口地址
//引入request.js文件 import request from "./request"; // 轮播 export function getBanners(data) { return request({ url: "/banner",//这个地址是去掉公共地址和私有域名之后剩下的地址 method: "GET",//请求方式 支持多种方式 get post put delete 等等 data//发送请求要配置的参数 无参数的情况下也可以不写 }); }
最后是在页面中的引用
那个页面需要请求数据 就引入相应的方法 比如我的首页需要引入banner
<script> //引入需要的接口 import { getBanners } from "../http/api"; export default { name: "Home", components: {}, mounted() { //直接使用 .then 是请求成功的回调 .catch是请求失败的回调 getBanners() .then(result => { window.console.log("111", result); }) .catch(err => { window.console.log("222", err); }); }, methods: {} }; </script>
以上就是如何用vue封装axios请求的详细内容,更多关于用vue封装axios请求的资料请关注开心学习网其它相关文章!
您可能感兴趣
- vue怎么注册公共组件(解读Vue组件注册方式)
- vue 组件如何转换虚拟dom(Vue源码分析之虚拟DOM详解)
- vue怎么配置到idea(idea编译器vue缩进报错问题场景分析)
- vue创建dom节点(Vue批量更新dom的实现步骤)
- vue商城购物车数据(vue实现购物车全部功能的简单方法)
- vue查询条件生成工具(vue实现四级导航及验证码的方法实例)
- vue加载html5动画(vue实现旋转木马动画)
- vue滚动条下拉翻页(Vue中利用better-scroll组件实现横向滚动功能)
- vue3.0安装element(vue3+electron12+dll开发客户端配置详解)
- vue项目上线教程(vue项目中使用骨架屏的方法)
- vue功能测试和生产环境切换(vue 单元测试的推荐插件和使用示例)
- vue2和vue3都如何创建项目(vue3.0+vite2实现动态异步组件懒加载)
- vue3 响应式的实现过程(Vue3.x使用mitt.js进行组件通信)
- vue3 axios 怎么封装api(vue中如何简单封装axios浅析)
- vue如何获取元素(vue第一次获取不到元素的解决方法记录)
- vue项目的一些手动配置(使用vue项目配置多个代理的注意点)
- 魅族智能手表充电座曝光 Type-C 接口,线座分离设计(魅族智能手表充电座曝光)
- 华为 Watch GT2 Pro 智能手表曝光,新增支持无线充电(华为WatchGT2)
- vivo首款智能手表来了 也有血氧饱和度监测,一次充电18天续航(vivo首款智能手表来了)
- 你知道 七夕 的真正含义吗(你知道七夕的真正含义吗)
- 七夕的寓意(七夕的寓意)
- 苏志燮赵恩静结婚,韩国四大公共财产变三人,这么快就有替补了(苏志燮赵恩静结婚)
热门推荐
- css 的基本规则写法(CSS中的指定值、初始值和计算值学习教程)
- python获取excelsheet名称(python查询文件夹下excel的sheet名代码实例)
- python3web编程基础教程(python初学者,用python实现基本的学生管理系统python3代码实例)
- python菜单栏中常用的菜单(Python3实现的简单三级菜单功能示例)
- pythonhtml文件分析(对Python3 解析html的几种操作方式小结)
- python 爬虫招聘(Python3获取拉勾网招聘信息的方法实例)
- Oracle TO_CHAR的使用
- apache 配置域名(apache 二级域名解析 window与linux)
- sqlserver的图形表(SQL Server纵表与横表相互转换的方法)
- mysql把重复数据删掉(mysql查找删除重复数据并只保留一条实例详解)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9