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. NSRunloop总结

    NSRunloop是一个消息处理机制:是一个循环. 系统通过消息队列和runloop与进程(线程)通信. runloop是一个机制和体系结构. 它包含以下几个方面: 1.事件源管理: 2.事件的检索与 ...

  2. Long型转换成IP段String、StringIP段转换成Long型

    /** 把long类型的Ip转为一般Ip类型:xx.xx.xx.xx * * @param ip * @return */ public static String getIpFromLong(Lon ...

  3. luogu P3387 【模板】缩点_拓扑排序

    还是很好些的. Code: #include <stack> #include <cstdio> #include <algorithm> #include < ...

  4. Pyhton二级操作题练习

    # 1.编写一个python程序,输入两个数,比较它们的大小并输出其中较大者. num1 = input('请输入数字X:') num2 = input('请输入数字Y:') if num1.isde ...

  5. [置顶] Elon Musk (伊隆·马斯克):无限的创想与意志的胜利

    Elon Musk (伊隆·马斯克):无限的创想与意志的胜利 很多人说 Steve Jobs 很伟大,这一点我认同.但是,单纯从创造出的产物而言,Elon Musk 的成就毫无疑问远远超越 Steve ...

  6. [luogu2151 SDOI2009] HH去散步 (矩阵快速幂)

    传送门 题目描述 HH有个一成不变的习惯,喜欢饭后百步走.所谓百步走,就是散步,就是在一定的时间 内,走过一定的距离. 但是同时HH又是个喜欢变化的人,所以他不会立刻沿着刚刚走来的路走回. 又因为HH ...

  7. $attr和$listeners is readonly

    https://www.jb51.net/article/132371.htm 出现这个问题的原因,主要是因为在使用的时候出现了A组件调用B组件,B组件再调用了C组件.而直接使用了A组件修改C组件的数 ...

  8. VUE:条件渲染和列表渲染

    条件渲染 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <titl ...

  9. ASP.NET-dropdownlist默认值

    可以在第三个选项中定义一个默认值,但是返回数据的时候就不需要这种类似"请选择名称"之类的提示了,所以在构造seleclt option的时候,要在option中的属性中加上sele ...

  10. jQuery判断浏览器类型和版本

    jquery 判断浏览器类型 例:   if($.browser.msie) { alert("这是一个IE浏览器"); }else if($.browser.opera) { a ...