axios 基本运用
axios是专门对ajax请求进行封装的一个插件,其返回一个promise对象,用法跟ES6的promise很相似
一、安装axios插件
npm install axios
二、引入axios插件
在main.js中引入,如下:
import axios from 'axios'
三、在代码中执行请求,没有配置请求方式时默认为GET请求
(1)执行GET请求
this.$http.get("https://www.ehometd.com/temporary/api/other/all.php?fc=bianlifile&FID=459&Class=3", {
params: {
ID: 459
}
})
.then(response => {
this.nowImg = response.data.Sub[460].File[0].ImgUrl; // 初始默认为第一个系列的第一张图片
this.goods_name = response.data.Sub[460].File[0].Name;
this.goods_style = response.data.Sub[460].File[0].Desc;
})
.catch(function(error) {
console.log(error);
});
}
(2)执行POST请求
this.$http.post("https://www.ehometd.com/temporary/api/other/all.php?fc=bianlifile&FID=459&Class=3", {
params: {
ID: 459
}
})
.then(response => {
this.nowImg = response.data.Sub[460].File[0].ImgUrl; // 初始默认为第一个系列的第一张图片
this.goods_name = response.data.Sub[460].File[0].Name;
this.goods_style = response.data.Sub[460].File[0].Desc;
})
.catch(function(error) {
console.log(error);
});
}
如果报错:ReferenceError: $http is not defined"
需要安装vue-resource插件,然后在main.js中引入:
import vueResource from 'vue-resource';
Vue.use(vueResource);
四、执行多个并发请求(同时执行多个请求语句)
function getUserAccount() {
return axios.get('/user/1244');
}
function getUserPromise() {
return axios.get('/user/666/promise');
}
axios.all([getUserAccount(), getUserPromise()])
.then(axios.spread(function(acct, perms){
// 两个请求都完成时才走到这里来,跟ES6的Promise.all()一样的原理
}));
axios 基本运用的更多相关文章
- 为什么axios请求接口会发起两次请求
之前在使用axios发现每次调用接口都会有两个请求,第一个请求时option请求,而且看不到请求参数,当时也没注意,只当做是做了一次预请求,判断接口是否通畅,但是最近发现并不是那么回事. 首先我们知道 ...
- axios基本用法
vue更新到2.0之后,作者就宣告不再对vue-resource更新,而是推荐的axios,前一段时间用了一下,现在说一下它的基本用法. 首先就是引入axios,如果你使用es6,只需要安装axios ...
- Axios、Lodash、TweenJS
Axios是一个基于promise的HTTP库 http://chuansong.me/n/394228451820 Lodash是一个JavaScript的函数工具集 http://www.css8 ...
- axios全攻略
随着 vuejs 作者尤雨溪发布消息,不再继续维护vue-resource,并推荐大家使用 axios 开始,axios 被越来越多的人所了解.本来想在网上找找详细攻略,突然发现,axios 的官方文 ...
- 抛弃vue-resource拥抱axios
vue-resource用法 import Vue from 'vue' import VueResource from 'vue-resource' Vue.use(VueResource) 是不是 ...
- Vue+axios 实现http拦截及路由拦截
现如今,每个前端对于Vue都不会陌生,Vue框架是如今最流行的前端框架之一,其势头直追react.最近我用vue做了一个项目,下面便是我从中取得的一点收获. 基于现在用vue+webpack搭建项目的 ...
- vue使用Axios做ajax请求
vue2.0之后,就不再对vue-resource更新,而是推荐使用axios 1. 安装 axios $ npm install axios 或 $ bower install axios 2. 在 ...
- vue全家桶(Vue+Vue-router+Vuex+axios)(Vue+webpack项目实战系列之二)
Vue有多优秀搭配全家桶做项目有多好之类的咱就不谈了,直奔主题. 一.Vue 系列一已经用vue-cli搭建了Vue项目,此处就不赘述了. 二.Vue-router Vue的路由,先献上文档(http ...
- 9.如何解决出现AXIOS的Request header field Content-Type is not allowed by Access-Control-Allow-Headers in preflight response.
问题描述: 由于restful接口需要在头部header传递两个字段: Content-Type: application/jsonAccess-Token: 84c6635800b14e0eba4f ...
- vue2.0设置proxyTable使用axios进行跨域请求
这里请求的是知乎日报的api,由@izzyleung这位大神提供的,这是github地址. 在vue-cli构建的项目中先安装axios npm install axios -S 这里暂不考虑用vue ...
随机推荐
- python random生成随机手机号
上代码 #--------------- #!/usr/bin/python #_*_coding:UTF-8_*_ import random #生成随机手机号 str_start=random.c ...
- 词表征 3:GloVe、fastText、评价词向量、重新训练词向量
原文地址:https://www.jianshu.com/p/ca2272addeb0 (四)GloVe GloVe本质是加权最小二乘回归模型,引入了共现概率矩阵. 1.基本思想 GloVe模型的目标 ...
- Django框架(一)—— 安装使用Django
目录 Django入门 一.web应用 二.C/S 和B/S 架构 三.python中的web框架 四.http协议 五.URL简介 六.Django的安装和使用 Django入门 一.web应用 W ...
- NIO 源码分析(02-2) BIO 源码分析 Socket
目录 一.BIO 最简使用姿势 二.connect 方法 2.1 Socket.connect 方法 2.2 AbstractPlainSocketImpl.connect 方法 2.3 DualSt ...
- c# mvc 简洁大气官网---源码
结构
- ArcGis 字段计算器表达式(Field calculator expression).cal文件与标注表达式(label expression).lxp的实质及其编码方式、解析方法
ArcGis 字段计算器表达式可以保存为一个扩展名为.cal的文件,该文件的实质是一个文本文件,编码方式为 UTF-16-LE. 官方的说明是“ArcGIS 应用程序使用 UTF-16-LE 编码读写 ...
- 自记录:git如何上传文档到git@osc
前提: D盘有gitserver文件夹 双击桌面的git.exe文件,打开git命令窗口 输入cd d: 命令进入D盘 输入cd gitserver命令进入 找到git@osc自己参与项目里的htt ...
- oracle中的round()方法的用法
[oracle中的round()方法的用法] Round( ) 函数 传回一个数值,该数值是按照指定的小数位元数进行四舍五入运算的结果 oracle一般常用于计算表空间内存还有多少空间 语法 ROUN ...
- 代码托管平台--GitHub 使用小结
一.GitHub介绍 GitHub是一个面向开源及私有软件项目的托管平台,因为只支持git作为唯一的版本库格式进行托管.在GitHub,用户可以十分轻易地找到海量的开源代码. 很多IT行业的人到求职的 ...
- php7 安装时需求的依赖包
php70 php70-bcmath php70-cli php70-common php70-devel php70-fpm php70-gd php70-json php70-mbstring p ...