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 ...
随机推荐
- Openstack组件部署 — Nova overview
目录 目录 前文列表 前言 Compute service overview Nova 的组件 nova-api service nova-api-metadata service nova-comp ...
- IIS身份验证和文件操作权限(三、ASP.NET模拟)
一.配置ASP.NET模拟 注意:在配置[ASP.NET模拟]是还要配置[匿名身份验证]不知道为什么,有知道可以留言,互相学习 二.浏览站点 -- 操作文件 ①无操作权限 点击写入 ②有操作权限(特定 ...
- git分布式版本控制系统权威指南学习笔记(二):git add暂存区的三个状态以及暂存区的理解
文章目录 不经过git add(到暂存区),能直接进行commit吗? 举个
- new delete
malloc/free是标准的库函数,而new/delete是操作符 匹配使用原则:malloc(calloc/realloc)和free 以及new/new[] 和delete/delete[]; ...
- Hyperledger:常见加密算法分类列表
算法原理查询:http://mathworld.wolfram.com 加密散列函数 (消息摘要算法,消息认证码,MD算法) Keyed-hash message authentication c ...
- 拾遗:nmcli 连接 wifi
... nmcli device wifi list nmcli device wifi connect SSID password PASSWORD ...
- ES6_Demo,模拟后台json数据展示
最近在学习ES6,下面,模拟后台传过来json数据,并在页面展示的一个小Demo. 页面简单的不可描述,只有一个button按钮 <button>点击获取json数据</button ...
- JS中的事件、数组、节点对象处理
在JS代码中编写事件一定要保证页面在浏览器中加载时会把事件加载进页面 事件:在代码中可以通过一个动作来触发另一个行为的总称 A:事件的编写方式1 HTML标签中添加 onxxxx = "函数 ...
- print的简单使用
import time num=20 for i in range(num): print("#", end="") 结果如下: 加个强制刷新 num=20 f ...
- VSCode运行JavaScript代码
方式一(推荐): 安装插件 open in window, 然后option+b