vue项目，如何将“API接口” 封装为“全局变量” ？

1. API全局配置文件【`global.vue文件`】

<template><div> </div>
</template><!-- API全局变量 -->
<script>    // 本地 接口地址const localSrc = 'http://192.168.0.103:8444'; // 线上 接口地址const serverSrc = 'http://www.xxxxxx.com:8080/jobs-api';export default{localSrc,serverSrc}
</script><style>
</style>

2. 全局注册引入文件【`main.js文件`】


// 引入API接口文件
import global_ from './components/api/global'//引用文件
Vue.prototype.GLOBAL = global_//挂载到Vue实例上面

3. 如下代码片段：【`注释1`、`注释2`、`注释3`】

methods: {ajaxLoginApi: function (form) {     var that=this.form; // 放置指针，便于then操作的获取       console.log("账号"+that.username+"密码"+that.pwd);// var localPath = 'http://192.168.0.103:8444'; // var ecsPath = 'http://www.1688jobs.com:8080/jobs-api/'var localPath = this.GLOBAL.localSrc;  // 本地 接口地址 【注释1】var serverPath = this.GLOBAL.serverSrc; // 线上 接口地址【注释2】axios.post( serverPath + '/login',        //  【注释3】{// 'userName':'17681135201',// 'userPwd':'123456',// 'userType':"2"            'userName': this.form.username,'userPwd': this.form.pwd,'userType':"2"},{headers: {'Content-Type':'application/json',//'Authorization':'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1c2VySWQiOiI1QUZFRkQ4NTNFNjIwNDIyOEIwNDE3MzdCMDdBNEJCNURDNTBEQjA4OUFCQzBENDM4MDA5RkM4REU4QkMyODkzIiwidXNlck5hbWUiOiIxNzY4MTEzNTIwMSIsInVzZXJBZ2VudCI6Ik1vemlsbGEvNS4wIChXaW5kb3dzIE5UIDEwLjA7IFdpbjY0OyB4NjQpIEFwcGxlV2ViS2l0LzUzNy4zNiAoS0hUTUwsIGxpa2UgR2Vja28pIENocm9tZS82OC4wLjM0NDAuMTA2IFNhZmFyaS81MzcuMzYiLCJleHAiOjE1NTE5MzYzODQsIm5iZiI6MTU1MTkzNDU4NH0.YgRW-Wnlk_Gz64id_jTocH68oj8DuZuI1WyQBmmrt7c'}},).then(function (response) {console.log("response="+response);console.log("responseheader="+response.headers);var reslutData = response;  // console.log(reslutData.data.code);   // 登录账号和密码 检测if (reslutData.data.code == 2006) { // 用户名不存在this.$notify.error({title: reslutData.data.message,duration: 2000});return false;}if (reslutData.data.code != 200) { // 登录失败this.$notify.error({title: reslutData.data.message,duration: 2000});return false;} else { // 登录成功// 弹框成功提示this.$notify({title: reslutData.data.message,// message: '正在跳转中···',type: 'success',duration: 2000});console.log("token=" + reslutData.data.data.token)// token写入本地客户端存储localStorage.setItem("token",reslutData.data.data.token);// token获取本地客户端存储// var key = localStorage.getItem("token");// console.log("key=" + key)// 成功之后执行跳转   this.$router.replace   this.$router.replace('/search');}}.bind(this)).catch(function (error) {console.log("请求失败"+error);});},

以上就是关于“ vue项目：（全局变量设置与调用）API接口封装 - 代码篇 ” 的全部内容。

vue项目：（全局变量设置与调用）API接口封装 - 代码篇相关推荐

用php调用api接口，常用的命令有哪些呢？
在 PHP 中调用 API 接口,常用的命令有以下几种: cURL 命令:cURL 是一个功能强大的用于发送 HTTP 请求的库,可以通过 PHP 的 cURL 函数库进行调用.cURL 函数库可以通 ...
vue请求拦截给所有的api接口的请求 params 带上一个存储的值及qs的安装
vue请求拦截给所有的api接口的请求 params 带上一个存储的值: Vue.prototype.$http = axios; // 设置请求拦截器,为请求对象添加token,这是后续权限api ...
java扫描接口_一种扫描接口并生成可调用API接口文档的方法与流程
本发明属于JavaWeb开发技术领域,涉及一种API接口文档的生成方法,尤其是一种扫描接口并生成可调用API接口文档的方法. 背景技术: API(Application Programming Int ...
【学习总结】-Apsara Clouder专项技能认证：实现调用API接口学习总结
Apsara Clouder专项技能认证:实现调用API接口-学习总结 API的概念: API的特点: API的分类: 为什么要使用API 阿里云API市场 API请求与认证 Web API协议 HT ...
Apsara Clouder基础技能认证:实现调用API接口
我是葛连吉,抽出半上午的时间终于把这个Apsara Clouder基础技能认证:实现调用API接口的证书给考了出来,这次是阿里云优惠,免费就可以学习该内容并且考证! 我给大家分享一个考试的知识点一. ...
【考试记录】Apsara Clouder基础技能认证：实现调用API接口
从今天开始,准备把阿里的认证尽可能多的考出来.原因有这么几个:研究生要毕业了,除了把论文写好,还有找工作的压力,所以想尽可能多的考出几个证来证明自己的学习能力:研究生毕业后想找个教师的工作,所以得以身 ...
阿里云Apsara Clouder专项技能认证-实现调用API接口-学习笔记
Apsara Clouder专项技能认证-实现调用API接口-学习笔记阿里云的一个小认证,闲来无事,考一下一.API简介 API的概念 API(Application Programming In ...
php如何调用mysql接口_php5 调用api接口
XXL-HEX v1.2.0,面向对象的 WebAPI 框架版本1.2.0新特性 1.Client端,新增Javascript版本实现:前端JS可使用提供的Client,直接调用XXL-HEX的加密 ...
Apsara Clouder专项技能认证：实现调用API接口|参考文档
API简介 API的概念 API(Application Programming Interface , 应用程序编程接口)是一些预先定义的函数,目的是提供应用程序与开发人员基于某软件或硬件得以访问一 ...

vue项目：（全局变量设置与调用）API接口封装 - 代码篇

vue项目，如何将“API接口” 封装为“全局变量” ？

1. API全局配置文件【`global.vue文件`】

2. 全局注册引入文件【`main.js文件`】

3. 如下代码片段：【`注释1`、`注释2`、`注释3`】

vue项目：（全局变量设置与调用）API接口封装 - 代码篇相关推荐

最新文章

热门文章

vue项目：（全局变量设置与调用）API接口封装 - 代码篇

vue项目，如何将“API接口” 封装为“全局变量” ？

1. API全局配置文件【global.vue文件】

2. 全局注册引入文件 【main.js文件】

3. 如下代码片段：【注释1、注释2、注释3】

vue项目：（全局变量设置与调用）API接口封装 - 代码篇相关推荐

最新文章

热门文章

1. API全局配置文件【`global.vue文件`】

2. 全局注册引入文件【`main.js文件`】

3. 如下代码片段：【`注释1`、`注释2`、`注释3`】