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. web开发必看:你的网站支持https吗?

    如果有一项技术可以让网站的访问速度更快.更安全.并且seo权重提升(百度除外),而且程序员不需要改代码就可以全站使用,最重要的是,不需要额外花钱,那有这么好的事情吗? HTTP通信协议是全球万维网ww ...

  2. 不懂技术也可以轻松开发一款APP

    这是个衣食住行都离不开手机的时代,甚至可以说,我们不用考虑其他的东西,只要拿着手机,就可以出门做自己想做的事情. 这就是手机app的强大之处,覆盖面极广,小到聊天交友,大到投资理财.每次都是app为我 ...

  3. 为什么叫Unity3d为脚本语言

    初接触Unity,看到大家说的都是工作主要是写脚本语言. 一直纳闷为什么说脚本语言呢,c#可不是脚本语言啊. -- -- 后来释然,说它是脚本语言是因为传统程序都是由代码构成的(像iOS.Androi ...

  4. [Vue warn]: Invalid prop: custom validator check failed for prop "type".

    遇到错误如下, [Vue warn]: Invalid prop: custom validator check failed for prop "type". found in ...

  5. Svn 提交新文件

    1.右击文件: 2.按图做:

  6. 紫书 习题7-13 UVa 817(dfs+栈求表达式的值)

    题目链接  点击打开链接 这道题分为两个部分, 一用搜索枚举每种可能, 二计算表达式的值, 有挺多细节需要注意 特别注意我的代码中在计算表达式的值中用到了一个!(代码枚举中的!表示不加符号, 我现在说 ...

  7. js手动定时清除localStorage

    <script type="text/javascript"> // 假设要保存变量 a 的值,过期时间为 3600秒 // 保存值 var obj = new Obj ...

  8. C#-WebService基础02

    WebService WSDL是web service的交换格式 跨平台数据交互 什么是web服务 SOA 面向服务的体系结构  service-Oriented Architecture Servi ...

  9. Xdoclet + Ant自己主动生成Hibernate配置文件

    在使用Hibernate的时候,过多的Hibernate配置文件是一个让人头疼的问题. 近期接触了Xdoclet这个工具. 它实际上就是一个自己主动代码生成的工具.Xdoclet不能单独执行,必须搭配 ...

  10. ZOJ 3435

    求(1,1,1)至(x,y,z)的互质个数. 即求(0,0,0)到(x-1,y-1,z-1)互质个数. 依然如上题那样做.但很慢...好像还有一个分块的思想,得学学. #include <ios ...