[WEB] Vue2封装axios,axios在Vue.cli中的使用
作者:CC下载站 日期:2021-06-11 00:00:00 浏览:60 分类:站长帮
添加http.js文件
在src目录下新增一个目录utils,并新增一个js文件http.js,用以实现axios的封装
编辑http.js,首先导入axios
import axios from 'axios'
定义Http Request公共信息,用以添加授权等
axios.interceptors.request.use(
config => {
let token = 'lanol'
config.headers.token = token;
if (config.method == 'get') {
config.params.token = token
}
if (config.method == 'post') {
config.data.token = token
}
return config;
},
error => {
return Promise.reject(err);
}
)
封装Get方法
export function get(uri, params = {}) {
return new Promise((resolve, reject) => {
axios.get(uri, {
params: params
})
.then(response => {
resolve(response.data)
})
.catch(err => {
reject(err)
})
})
}
封装POST方法
export function post(uri, data = {}) {
return new Promise((resolve, reject) => {
axios.get(uri, {
params: params
})
.then(response => {
resolve(response.data)
})
.catch(err => {
reject(err)
})
})
}
封装patch请求
export function patch(url, data = {}) {
return new Promise((resolve, reject) => {
axios.patch(url, data)
.then(response => {
resolve(response.data);
}, err => {
reject(err)
})
})
}
封装PUT请求
export function put(url, data = {}) {
return new Promise((resolve, reject) => {
axios.put(url, data)
.then(response => {
resolve(response.data);
}, err => {
reject(err)
})
})
}
实现跨域
const downloadUrl = url => {
let iframe = document.createElement('iframe')
iframe.style.display = 'none'
iframe.src = url
iframe.onload = function() {
document.body.removeChild(iframe)
}
document.body.appendChild(iframe)
}
Main.js中引用
import axios from 'axios'
import {get,post} from '@/utils/http.js'
Vue.prototype.$ajax = axios
Vue.prototype.$post = post
Vue.prototype.$get = get
使用http.js
<template>
<div id="app">
{{Lan}}
</div>
</template>
<script>
import axios from '@/utils/http.js'
export default {
name: 'app',
components: {
},
data() {
return {
Lan: ''
}
},
mounted() {
this.$get('https://v1.hitokoto.cn').then((response)=>{
this.Lan = response.hitokoto
console.log(response);
})
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
参考链接https://www.cnblogs.com/zhangbs/p/9681032.html
猜你还喜欢
- 03-29 [环境测试] Hexo部署GitHub Pages
- 03-22 [源码设置] 如何设置Xiuno BBS URL-Rewrite(伪静态设定)
- 03-06 [建站交流] PicGo + smms 构建图床
- 11-18 [emlog技巧] Emlog非插件显示评论者IP属地
- 11-09 [网站维护] WordPress 后台速度慢?加快仪表板速度的 15 种方法
- 11-09 [WordPress插件] 10 个最好用的 WordPress 聊天机器人插件(免费和付费)
- 11-09 [WordPress开发] 探索 WordPress 6.3 中的增强样板(Patterns)
- 11-09 [网站维护] 无需插件即可优化 WordPress 速度的 12 种策略
- 11-09 [网站安全] WordPress 安全统计:WordPress 到底有多安全?
- 09-20 [jsp技术] JSP ssm 特殊人群防走失系统myeclipse开发mysql数据库springMVC模式java编程计算机网页设计
- 09-15 [Lightsail容器] AWS Lightsail VPS:一种在云中运行容器的简单方法
- 07-28 [运维笔记] 解决网站出现"SSL_ERROR_RX_RECORD_TOO_LONG"问题
取消回复欢迎 你 发表评论:
- 精品推荐!
-
- 最新文章
- 热门文章
- 热评文章
[web] 免费公共DNS大全(IPv6+IPv4)
[硬件检测] 内存测试工具 MemTestPro 汉化版(7.0)
[硬件检测] 专业硬件检测工具 | HWiNFO(8.0.5400.0)
[系统加速] 利用内存给硬盘加速 | RamCache III 去限制版(1.01.12)
[游戏技巧] 龙之信条2存档备份教程(建议收藏)
[游戏资讯] 龙之信条2存档位置在哪 存档备份教程
[游戏资讯] 最近热门手游有哪些,装备全靠打的手游有哪些游戏,好玩的角色扮演游戏手游
[游戏资讯] 《无人深空》轨道新篇开启!快来定制自己的飞船探索宇宙吧
[游戏攻略] 2024咸鱼之王最强阵容 附雷电云手机搬砖教程
[云图志] 【皇马】Adidas Y-3 山本耀司联名广告 图集
[下载工具] Internet Download Manager 6.42.7 (IDM)
[即时通讯] 腾讯QQ PC版9.7.22.29315去广告绿色纯净版
[影视] 灌篮高手 WEB-DL版下载/Slam Dunk/スラムダンク/灌篮高手:THE FIRST/灌篮高手电影版 2022 The First Slam Dunk 61.35G
[开发环境] PhpStorm2023中文激活版v2023.3.3 正式版
[图像制作] Adobe Illustrator 2024 v28.1.0.141 破解版
[资料] 3000 套电影电视剧 LOGO 宣传片常用音效合集包
[截图软件] HyperSnap(截图软件)_v9.4.0.00_汉化破解版
[安卓软件] 酷我音乐APP_v10.7.6.4 去广告破解豪华VIP版
[输入法] 搜狗拼音输入法PC版13.13.0.8820精简优化版
[即时通讯] 微信PC版WeChat 3.9.9.43 多开防撤回绿色版
[影视] 灌篮高手 WEB-DL版下载/Slam Dunk/スラムダンク/灌篮高手:THE FIRST/灌篮高手电影版 2022 The First Slam Dunk 61.35G
[安卓软件] Android GIF助手 v3.9.7 GIF图片编辑器破解版
[影视] 如何做爱 WEB-DL版下载/第一次 2023 How to Have Sex 5.33G
[电视剧] 三体 (2024) 全8集 网飞版本 中文字幕 合集
[剧集] 繁花 (2023)[全30集][打包]
[影视] 三大队 WEB-DL版下载/Endless Journey/请转告局长,三大队任务完成了 2023 三大队 6.7G
[纪录片] 河西走廊【10集 国语 中文字幕 1080P 10.8G MP4】
[安卓软件] OfficeSuite中文版APP v14.2.50872.0破解版
[影视] 饥饿游戏:鸣鸟与蛇之歌 WEB-DL版下载/饥饿游戏:鸣鸟与蛇的歌谣 / 饥饿游戏前传:鸣鸟与灵蛇之歌(港) / 饥饿游戏:鸣鸟与游蛇之歌(台) / 鸣鸟与蛇之歌 / 鸣鸟与蛇的歌谣 / 鸣禽与蛇的歌谣 / 饥饿游戏前传 / The Hunger Games: The Ballad of Songbirds and Snakes 2023 The Ballad of Songbirds and Snakes 27.17G
[影视] 涉过愤怒的海 WEB-DL版下载/怒海 / Across the Furious Sea 2023 涉过愤怒的海 26.3G
- 最新评论
-
谢谢支持!!CC下载站 评论于:03-26 很棒的资源,感谢分享云体风身 评论于:03-26 感谢分享,好东西云体风身 评论于:03-26 谢谢支持!CC下载站 评论于:03-14 央视精品,感谢付出提供。qwer9009 评论于:03-14 谢谢支持!!!CC下载站 评论于:03-13 谢谢分享!Ypc9182 评论于:03-12 谢谢支持!!CC下载站 评论于:03-11 感谢本网站收集和提供这么多的资料,谢谢!Ypc9182 评论于:03-10 很棒的资源,支持一下lingzhi007 评论于:03-10
- 热门tag