axios它是基于promise的http库,可运行在浏览器端和node.js中,然后作者尤雨溪也是果断放弃了对其官方库vue-resource的维护,直接推荐axios库,小编我也是从vue-resource转换过来的,差别说不来,我们讲一下axios在实际开发中的用法
axios特点
1.从浏览器中创建 XMLHttpRequests
2.从 node.js 创建 http 请求
3.支持 Promise API
4.拦截请求和响应 (就是有interceptor)
5.转换请求数据和响应数据
6.取消请求
7.自动转换 JSON 数据
8.客户端支持防御 XSRF
安装axios和qs
1 2 |
|
创建项公共模块API
我是用vue-cli创建的项目在src->util->api.js(公共请求模块js)
引入axios和qs
1 |
|
有时候向后端发送数据,后端无法接收,考虑使用qs模块
1 |
|
判定开发模式
1 2 3 4 5 6 7 8 9 10 11 12 13 |
|
全局设置头部信息
1 |
|
全局设置超时时间
1 |
|
请求路由拦截
在请求发出去之前,可以做一些判断,看是否是合法用户
1 2 3 4 5 6 7 |
|
响应拦截
1 2 3 4 5 6 7 8 9 10 11 |
|
封装请求方法
使用ES6模块化export导出import导入
在ES6前, 前端就使用RequireJS或者seaJS实现模块化, requireJS是基于AMD规范的模块化库, 而像seaJS是基于CMD规范的模块化库, 两者都是为了为了推广前端模块化的工具,现在ES6自带了模块化,不过现代浏览器对模块(module)支持程度不同, 需要使用babelJS, 或者Traceur把ES6代码转化为兼容ES5版本的js代码;
get请求
1 2 3 4 5 6 7 8 9 10 11 |
|
post请求
1 2 3 4 5 6 7 8 9 10 11 |
|
实际使用
在main.js中引入js
1 2 3 4 |
|
配置请求环境
这里通过devServer请求代理
当在请求过程中有/api字符串会自动转换为目标服务器地址(target)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
|
这是请求聚合数据的接口为列子
1 2 3 4 5 6 7 8 9 10 11 12 |
|
返回数据
使用promise
1.比如用户想请求url1接口完后再调url2接口
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
|
Promise对象
- Promise有三种状态
- pending: 等待中,或者进行中,表示还没有得到结果
- resolved: 已经完成,表示得到了我们想要的结果,可以继续往下执行
- rejected: 也表示得到结果,但是由于结果并非我们所愿,因此拒绝执(用catch捕获异常)
这三种状态不受外界影响,而且状态只能从pending改变为resolved或者rejected,并且不可逆(顾名思义承诺的后的东西怎么又能返回呢)。在Promise对象的构造函数中,将一个函数作为第一个参数。而这个函数,就是用来处理Promise的状态变化
这里要注意,不管是then或者catch返回的都是一个新的Promise实例!而每个Primise实例都有最原始的Pending(进行中)到Resolve(已完成),或者Pending(进行中)到Reject(已失败)的过程
Promise基本用法
Promise.all()用法
1 |
|
all()接受数组作为参数。p1,p2,p3都是Promise的实例对象,p要变成Resolved状态需要p1,p2,p3状态都是Resolved,如果p1,p2,p3至少有一个状态是Rejected,p就会变成Rejected状态
Promise.race()用法
1 |
|
只要p1、p2、p3之中有一个实例率先改变状态,p的状态就跟着改变。那个率先改变的 Promise 实例的返回值,就传递给p的回调函数,p的状态就会改变Resolved状态
Promise resolve()用法
1 2 3 |
|
有时需要将现有对象转为Promise对象,Promise.resolve方法就起到这个作用.
Promise reject()用法
1 2 3 |
|
Promise.reject(reason)方法也会返回一个新的 Promise 实例,该实例的状态为rejected。但是Promise.reject()方法的参数,会原封不动地作为reject的理由,变成后续方法的参数。这一点与Promise.resolve方法不一致。