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. CDR发展史-CorelDRAW经历了哪些版本?

    1989年CorelDRAW横空出世,它引入了全彩矢量插图和版面设计程序,这在计算机图形领域掀起了一场风暴般的技术革新.两年后,Corel又推出了首款一体化图形套件(第 3 版),将矢量插图.版面设计 ...

  2. 我用windows live Writer 写个日志试试看

    我用windows live Writer 写个日志试试看. 哈哈 播放幻灯片 全部下载

  3. jq——事件

    http://www.w3school.com.cn/jquery/jquery_ajax_intro.asp $(document),$(body) 加载事件: $(document).ready( ...

  4. 四、分布式 Git(未完待续)

    一.分布式工作流程 在 Git 中,每个开发者同时扮演着节点和集线器的角色——也就是说,每个开发者既可以将自己的代码贡献到其他的仓库中,同时也能维护自己的公开仓库,让其他人可以在其基础上工作并贡献代码 ...

  5. linux 模块编译步骤(原)

    linux 模块编译步骤(原) 博主推荐:<Linux命令模板Licote(原)> 本文将直接了当的带你进入linux的模块编译.当然在介绍的过程当中,我也会添加一些必要的注释,以便初学者 ...

  6. dbgview

    这两天在看一个问题,matlab打不开摄像头,总是报错. 尝试抓包,打印,分析代码,一直没有找出问题,后来用dbgview打印出来调试信息,找到了问题点. 不得不说,这个工具真不错,以前从来不知道. ...

  7. 2、Koa2 路由+cookie

    一.koa2 原生路由的实现 const Koa = require('koa'); const app = new Koa(); const fs = require('fs'); function ...

  8. js应用中的小细节-时间戳的转换和input输入框有效数字

    1 input输入框内value值保留有效数字,js自带的方法.toFixed(),但是直接使用会报错,因为不论输入框内输入汉字.字母还是数字,类型都是string.解决的办法是将其转换为number ...

  9. 2015 Multi-University Training Contest 6 hdu 5361 In Touch

    In Touch Time Limit: 8000/4000 MS (Java/Others)    Memory Limit: 131072/131072 K (Java/Others)Total ...

  10. objective-c訪问控制符

    objective-c中成员变量的四个訪问控制符: @private:仅仅有当前类的内部才干訪问 @public:全部人都可訪问 @protected:仅仅限当前类和它的子类可以訪问 @package ...