转axios 的应用
尤雨溪之前在微博发布消息,不再继续维护vue-resource,并推荐大家开始使用 axios 。
一、axios 简介
axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,它本身具有以下特征:https://hzzly.github.io/2017/03/12/axios%E5%9C%A8vue%E4%B8%AD%E7%9A%84%E7%AE%80%E5%8D%95%E9%85%8D%E7%BD%AE%E4%B8%8E%E4%BD%BF%E7%94%A8/
- 从浏览器中创建 XMLHttpRequest
- 从 node.js 发出 http 请求
- 支持 Promise API
- 拦截请求和响应
- 转换请求和响应数据
- 取消请求
- 自动转换JSON数据
- 客户端支持防止 CSRF/XSRF
二、引入方式:
npm:
1
2
3
|
$ npm install axios
//淘宝源
$ cnpm install axios
|
bower:
1
|
$ bower install axios
|
cdn:
1
|
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
|
三、vue中axios的配置
之前那个开源项目一开始就打算用axios,在网上找了好多文章与攻略,发现好多都不太详细,所以打算自己动手配置一个,(不要怂,撸起袖子就是干)。
我的配置:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
|
import axios from 'axios'
import qs from 'qs'
import * as _ from '../util/tool'
axios.defaults.timeout = 5000; //响应时间
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8'; //配置请求头
axios.defaults.baseURL = '你的接口地址'; //配置接口地址
//POST传参序列化(添加请求拦截器)
axios.interceptors.request.use((config) => {
//在发送请求之前做某件事
if(config.method === 'post'){
config.data = qs.stringify(config.data);
}
return config;
},(error) =>{
_.toast("错误的传参", 'fail');
return Promise.reject(error);
});
//返回状态判断(添加响应拦截器)
axios.interceptors.response.use((res) =>{
//对响应数据做些事
if(!res.data.success){
// _.toast(res.data.msg);
return Promise.reject(res);
}
return res;
}, (error) => {
_.toast("网络异常", 'fail');
return Promise.reject(error);
});
//返回一个Promise(发送post请求)
export function fetch(url, params) {
return new Promise((resolve, reject) => {
axios.post(url, params)
.then(response => {
resolve(response.data);
}, err => {
reject(err);
})
.catch((error) => {
reject(error)
})
})
}
|
四、vue中使用配置好的axios
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
export default {
/**
* 用户登录
*/
Login(params) {
return fetch('/users/api/userLogin', params)
},
/**
* 用户注册
*/
Regist(params) {
return fetch('/users/api/userRegist', params)
},
/**
* 发送注册验证码
*/
RegistVerifiCode(tellphone) {
return fetch('/users/api/registVerifiCode', {tellphone: tellphone})
},
......
}
|
如果觉得还行,欢迎star
项目地址: https://github.com/hzzly/xyy-vue
demo地址: http://hjingren.cn/xyy-vue/
好了,溜了溜了。。。
转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 ...
随机推荐
- libev4.15学习
libev作为优秀的高性能IO框架,非常值得学习! 虽然我是菜鸟,但也必须学习啦,从今天一点一点地学习,慢慢进步! # include "ev.h" struct event_ba ...
- php数组使用json_encode函数中文被编码成null的原因和解决办法
大写的囧,提客户处理问题,前端的APP一直在叽叽咂咂,说收到的值是null,弄了半天原来是这个问题,记录下吧 json格式在开发中用的十分广泛.在php中json_encode函数可以直接将数组转成 ...
- jquery添加未来元素时,其绑定事件不起作用解决办法
delegate说起对未来元素是其作用的,于是写下代码: <!DOCTYPE HTML> <html> <head> <meta charset=" ...
- Rplidar学习(三)—— ROS下进行rplidar调试
一.建立工作空间.编译包 mkdir -p ~/catkin_rplidar/src #创建目录 cd ~/catkin_rplidar/src #打开目录 #下载rplidar_ros数据包,进行移 ...
- HDU 4576 Robot (概率 & 期望)
Robot Time Limit: 8000/4000 MS (Java/Others) Memory Limit: 102400/102400 K (Java/Others)Total Sub ...
- 【javascript】javascript中function(){},function(){}(),new function(){},new Function()
和java比起来,javascript真的是松散的无以复加,不过这也让我们在无聊之余,有精力去探讨一些复杂的应用,从而在开发之路上,获得一些新的想法. javascript中的类的构造 javascr ...
- C#多线程JOIN方法初探
[说明:刚接触多线程时,弄不明白Join()的作用,查阅了三本书,都不明不白.后来经过自己的一番试验,终于弄清了Join()的本质.大家看看我这种写法是否易懂,是否真的写出了Join()的本质,多提宝 ...
- Alan Cox:单向链表中prev指针的妙用
之前发过一篇二级指针操作单向链表的例子,显示了C语言指针的灵活性,这次再探讨一个指针操作链表的例子,而且是一种完全不同的用法. 这个例子是linux-1.2.13网络协议栈里的,关于链表遍历& ...
- window.location.href 与 window.loaction.replace区别
window.location.href和window.location.replace的区别 1.window.location.href=“url”:改变url地址: 2.window.locat ...
- 安装CDH5时出错 5.68.168.192.in-addr.arpa domain name pointer bogon.
这个是因为使用的DNS是联通的server,联通会将所有保留的网络地址RFC1918( http://tools.ietf.org/html/rfc1918)都指向"bogon" ...