安装


使用 npm:

$ npm install axios

或者 使用 bower:

$ bower install axios

或者直接使用 cdn:

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

main.js设置如下

引入axios

import axios from 'axios'

挂载到vue的原型

Vue.prototype.$http = axios

在webpack.config.js(config—>index.js)文件里设置代理  注意  新版文件会有修改

dev: {
env: require('./dev.env'),
port: 8080, //设置访问的端口号
autoOpenBrowser: true, //自动打开浏览器
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {
'/api': {
target: 'http://10.10:8063', //设置调用接口域名和端口号别忘了加http
changeOrigin: true,
pathRewrite: {
'^/api': '/' //这里理解成用‘/api’代替target里面的地址,组件中我们调接口时直接用/api代替
// 比如我要调用'http://0.0:300/user/add',直接写‘/api/user/add’即可 代理后地址栏显示/
}
}
}

执行 GET 请求

// 为给定 ID 的 user 创建请求
axios.get('/user?ID=12345')
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
}); // 可选地,上面的请求可以这样做
axios.get('/user', {
params: {
ID: 12345
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});

执行 POST 请求

axios.post('/user', {
firstName: 'Fred',
lastName: 'Flintstone'
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});

执行多个并发请求

function getUserAccount() {
return axios.get('/user/12345');
} function getUserPermissions() {
return axios.get('/user/12345/permissions');
} axios.all([getUserAccount(), getUserPermissions()])
.then(axios.spread(function (acct, perms) {
// 两个请求现在都执行完成
}));

创建实例 
可以使用自定义配置新建一个 axios 实例 
axios.create([config])

var instance = axios.create({
baseURL: 'https://some-domain.com/api/',
timeout: 1000,
headers: {'X-Custom-Header': 'foobar'}
});

axios的详细用法以及后端接口代理的更多相关文章

  1. 记录一次用宝塔部署微信小程序Node.js后端接口代码的详细过程

    一直忙着写毕设,上一次写博客还是元旦,大半年过去了.... 后面会不断分享各种新项目的源码与技术.欢迎关注一起学习哈! 记录一次部署微信小程序Node.js后端接口代码的详细过程,使用宝塔来部署. 我 ...

  2. vue菜鸟从业记:公司项目里如何进行前后端接口联调

    最近我的朋友王小闰进入一家新的公司,正好公司项目采用的是前后端分离架构,技术栈是王小闰非常熟悉的vue全家桶,后端用的是Java语言. 在前后端开发人员碰面之后,协商确定好了前端需要的数据接口(扯那么 ...

  3. 开发环境Vue访问后端接口教程(前后端分离开发,端口不同下跨域访问)

    原理:开发环境下的跨域:在node.js上实现请求转发,vue前端通过axios请求到node.js上,node.js将请求转发到后端,反之.响应也是,先到node.js上,然后转发vue-cil项目 ...

  4. 循序渐进VUE+Element 前端应用开发(14)--- 根据ABP后端接口实现前端界面展示

    在前面随笔<循序渐进VUE+Element 前端应用开发(12)--- 整合ABP框架的前端登录处理>简单的介绍了一个结合ABP后端的登陆接口实现前端系统登陆的功能,本篇随笔继续深化这一主 ...

  5. __declspec关键字详细用法

    __declspec关键字详细用法 __declspec用于指定所给定类型的实例的与Microsoft相关的存储方式.其它的有关存储方式的修饰符如static与extern等是C和C++语言的ANSI ...

  6. 【转】java.util.vector中的vector的详细用法

    [转]java.util.vector中的vector的详细用法 ArrayList会比Vector快,他是非同步的,如果设计涉及到多线程,还是用Vector比较好一些 import java.uti ...

  7. c++ __declspec关键字详细用法

    c++ __declspec关键字详细用法 __declspec用于指定所给定类型的实例的与Microsoft相关的存储方式.其它的有关存储方式的修饰符如static与extern等是C和C++语言的 ...

  8. 基于Node.js的微信JS-SDK后端接口实现

    做了一个网站,放到线上,用微信打开,点击分享,可是分享后发给朋友的链接卡片是微信默认自带的,如下: 这标题,描述以及图片是默认自带的,丑不说,分享给别人还以为是盗号网站呢,而接入微信的JSSDK后,分 ...

  9. Android开发中Context类的作用以及Context的详细用法

    Android中Context的作用以及Context的详细用法 本文我们一起来探讨一下关于Android中Context的作用以及Context的详细用法,这对我们学习Android的资源访问有很大 ...

随机推荐

  1. 四、JVM — 类文件结构

    类文件结构 一 概述 二 Class 文件结构总结 2.1 魔数 2.2 Class 文件版本 2.3 常量池 2.4 访问标志 2.5 当前类索引,父类索引与接口索引集合 2.6 字段表集合 2.7 ...

  2. Let's encrypt 通配域名DNS验证方式的证书自动更新

    通配符域名不同于一般的单域名证书. 为了解决之前一篇短文中通配域名通过DNS方式验证的证书自动更新问题. 需要使用到第三方域名提供商的API, 用于自动添加域名的TXT记录, 实现自动验证并完成证书更 ...

  3. 6-2 如何读写json数据

    通过查看help(json.dump)和help(json.dumps)帮助信息,dump是将转换格式到文件对象,而dumps转换格式到字符串. 一.Json.dumps() Json.dumps() ...

  4. C#设计模式:访问者模式(Vistor Pattern)

    一,访问者模式是用来封装一些施加于某种数据结构之上的操作.它使得可以在不改变元素本身的前提下增加作用于这些元素的新操作,访问者模式的目的是把操作从数据结构中分离出来. 二,代码 using Syste ...

  5. spark复习笔记(1)

    使用spark实现work count ---------------------------------------------------- (1)用sc.textFile(" &quo ...

  6. 7.css3表格、列表、边框的样式设置--list/border

    1.css表格: ①Border-collapse是否把表格边框合并为单一的边框.Separate默认值,collapse合并. ②Border-spacing分割单元格边框的距离. ③Caption ...

  7. Spring基础14——Bean的生命周期

    1.IOC容器中的Bean的生命周期方法 SpringIOC容器可以管理Bean的生命周期,Spring允许在Bean生命周期的特定点执行定制的任务.SpringIOC容器对Bean的生命周期进行管理 ...

  8. egon说一切皆对象--------面向对象进阶紫禁之巅

    一.检查isinstance(obj,cls)和issubclass(sub,super) class Foo(object): pass obj = Foo() isinstance(obj, Fo ...

  9. L3-016. 二叉搜索树的结构

    二叉搜索树或者是一棵空树,或者是具有下列性质的二叉树: 若它的左子树不空,则左子树上所有结点的值均小于它的根结点的值:若它的右子树不空,则右子树上所有结点的值均大于它的根结点的值:它的左.右子树也分别 ...

  10. qt03 QString和QByteArray相互转换

    QString str("hello");   QByteArray bytes = str.toUtf8(); // QString转QByteArray方法1       QS ...