npm install axios

创建文件夹api/index.js

import axios from 'axios';

let http = axios.create({
baseURL: '',
changeOrigin: true,
withCredentials: true,
headers: {
'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'
},
transformRequest: [function (data) {
let newData = '';
for (let k in data) {
if (data.hasOwnProperty(k) === true) {
newData += encodeURIComponent(k) + '=' + encodeURIComponent(data[k]) + '&';
}
}
return newData;
}]
}); function apiAxios(method, url, params, response) {
http({
method: method,
url: url,
data: method === 'POST' || method === 'PUT' ? params : null,
params: method === 'GET' || method === 'DELETE' ? params : null,
}).then(function (res) {
response(res);
}).catch(function (err) {
response(err);
})
} export default {
get: function (url, params, response) {
return apiAxios('GET', url, params, response)
},
post: function (url, params, response) {
return apiAxios('POST', url, params, response)
},
put: function (url, params, response) {
return apiAxios('PUT', url, params, response)
},
delete: function (url, params, response) {
return apiAxios('DELETE', url, params, response)
}
}

  

main.js

import Api from './api/index.js';
Vue.prototype.$api = Api;

  

调用

 this.$api.get('/apis/index.php?act=login', {
"act": "login"
}, response => {
this.msg=response.data+'1';
},error => {
this.msg='error';
} );

  

axios使用方法的更多相关文章

  1. 使用Typescript重构axios(三十)——添加axios.getUri方法

    0. 系列文章 1.使用Typescript重构axios(一)--写在最前面 2.使用Typescript重构axios(二)--项目起手,跑通流程 3.使用Typescript重构axios(三) ...

  2. 使用Typescript重构axios(三十一)——添加axios.all和axios.spread方法

    0. 系列文章 1.使用Typescript重构axios(一)--写在最前面 2.使用Typescript重构axios(二)--项目起手,跑通流程 3.使用Typescript重构axios(三) ...

  3. Vue使用axios post方法发送json数据报415Unsupported Media Type

    1.Vue使用axios post方法发送json数据 <template> <el-aside> <el-form ref="form" :mode ...

  4. vue axios使用方法

    首先安装axios: cnpm install axios -save 安装成功后,在main.js页面引用: import axios from 'axios' import Qs from 'qs ...

  5. vue全局使用axios的方法

    在vue项目开发中,我们使用axios的二次封装,很多人一开始使用axios的方式,会当成vue-resoure的使用方式来用,即在主入口文件引入import VueResource from 'vu ...

  6. axios请求方法封装.

    axios的使用上一般封装好对应的方法,ES6导出,直接调用,消息通知使用了ElementUI的Message组件. 这是一个封装了axios的Rest风格的工具类,包扩常用的POST,GET,PUT ...

  7. axios+post方法提交formdata步骤详解

    遇到的问题 :怎么看自己发送的格式和后台发送的格式 参考 http://www.php.cn/js-tutorial-396014.html https://blog.csdn.net/qq73705 ...

  8. vue axios数据请求get、post方法的使用

    我们常用的有get方法以及post方法,下面简单的介绍一下这两种请求方法 vue中使用axios方法我们先安装axios这个方法 npm install --save axios 安装之后采用按需引入 ...

  9. axios源码入口以及公用方法

    axios学习笔记(公用方法) 源码地址 找到入口文件 axios/lib/axios.js var utils = require('./utils'); var bind = require('. ...

随机推荐

  1. jq——css类

    1  addClass(classname) 添加类 <script type="text/javascript"> $("input").clic ...

  2. JavaScript学习笔记(第二天)

    数组 为什么要学习数组 之前学习的数据类型,只能存储一个值(比如:Number/String.我们想存储班级中所有学生的姓名,此时该如何存储? 数组的概念 所谓数组,就是将多个元素(通常是同一类型)按 ...

  3. systemctl 控制单元

    [root@web01 ~]# systemctl status sshd.service ● sshd.service - OpenSSH server daemon Loaded: loaded ...

  4. android studio2.2 配置NDK

    1.配置环境: Android studio2.2 配置NDK NDK版本[android-ndk-r13b-windows-x86_64.zip] NDK下载网址:[https://dl.googl ...

  5. arXiv 2015深度学习年度十大论文

    由康奈尔大学运营维护着的arXiv网站,是一个在学术论文还未被出版时就将之向所有人开放的地方.这里汇聚了无数科学领域中最前沿的研究,机器学习也包括在内.它反映了学术界当前的整体趋势,我们看到,近来发布 ...

  6. javascript-datatable错误提示

    datatables插件在使用的时候出现了如下错误提示**出现此错误的原因可能是你写的table中没有加上<thead>和<tbody>标签所致**     来自为知笔记(Wi ...

  7. 简单来说一下java中的泛型,ssh中dao层使用会简化代码量

    原来仅仅是听老师说泛型特别好用,但是后来一直弄android用的泛型就比較少了.但是感觉它真的非常重要,于是花了一下午的时间写了个demo.好,老规矩.上代码: 首先,sysout是个工具,可是用着不 ...

  8. python实战之编码问题:中文!永远的痛

    编码的思维图谱: 也就是说文件没有编码之说,事实上都是按二进制格式保存在硬盘中的.不过在写入读取时须使用相应的编码进行处理,以便操作系统配合相关软件/字体,绘制到屏幕中给人看.所以关键问题是得知道原先 ...

  9. iOS开发之十万个为什么&lt;1&gt;

    郝萌主倾心贡献,尊重作者的劳动成果,请勿转载. 假设文章对您有所帮助.欢迎给作者捐赠,支持郝萌主,捐赠数额任意,重在心意^_^ 我要捐赠: 点击捐赠 Cocos2d-X源代码下载:点我传送 游戏官方下 ...

  10. 集群节点Elasticsearch升级

    集群节点Elasticsearch升级 操作流程 1.首先执行Elasticsearch-1.2.2集群的索引数据备份 2.关闭elasticsearch-1.2.2集群的recovery.compr ...