vue+axios+promise实际开发用法详解


Posted in Javascript onOctober 15, 2018

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

npm i axios --save
npm i qs--save

创建项公共模块API

我是用vue-cli创建的项目在src->util->api.js(公共请求模块js)

引入axios和qs

import axios from 'axios'

有时候向后端发送数据,后端无法接收,考虑使用qs模块

import qs from 'qs'

判定开发模式

if (process.env.NODE_ENV == 'development') {  

  axios.defaults.baseURL = '/api';

}else if (process.env.NODE_ENV == 'debug') {  

  axios.defaults.baseURL = 'http://v.juhe.cn';

}else if (process.env.NODE_ENV == 'production') {  

  axios.defaults.baseURL = 'http://v.juhe.cn';

}

全局设置头部信息

axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';

全局设置超时时间

axios.defaults.timeout = 10000;

请求路由拦截

在请求发出去之前,可以做一些判断,看是否是合法用户

axios.interceptors.request.use(function (config) {
  // 一般在这个位置判断token是否存在
  return config;
  }, function (error) {
  // 对请求错误做些什么
  return Promise.reject(error);
});

响应拦截

axios.interceptors.response.use(function (response){
   // 处理响应数据
  if (response.status === 200) {      
    return Promise.resolve(response);    
  } else {      
    return Promise.reject(response);    
  }
  }, function (error){
  // 处理响应失败
  return Promise.reject(error);
});

封装请求方法

使用ES6模块化export导出import导入

在ES6前, 前端就使用RequireJS或者seaJS实现模块化, requireJS是基于AMD规范的模块化库, 而像seaJS是基于CMD规范的模块化库, 两者都是为了为了推广前端模块化的工具,现在ES6自带了模块化,不过现代浏览器对模块(module)支持程度不同, 需要使用babelJS, 或者Traceur把ES6代码转化为兼容ES5版本的js代码;

get请求

export function get(url, params){  
  return new Promise((resolve, reject) =>{    
    axios.get(url, {      
      params: params    
    }).then(res => {
      resolve(res.data);
    }).catch(err =>{
      reject(err.data)    
    })  
  });
}

post请求

export function post(url, params) {
  return new Promise((resolve, reject) => {
     axios.post(url, qs.stringify(params))
    .then(res => {
      resolve(res.data);
    })
    .catch(err =>{
      reject(err.data)
    })
  });
}

实际使用

在main.js中引入js

import {get,post} from './utils/api'
//将方法挂载到Vue原型上
Vue.prototype.get = get;
Vue.prototype.post = post;

配置请求环境

这里通过devServer请求代理

当在请求过程中有/api字符串会自动转换为目标服务器地址(target)

devServer: {
  historyApiFallback: true,
  hot: true,
  inline: true,
  stats: { colors: true },
  proxy: {
   //匹配代理的url
   '/api': {
     // 目标服务器地址
       target: 'http://v.juhe.cn',
       //路径重写
       pathRewrite: {'^/api' : ''},
       changeOrigin: true,
       secure: false,
      }
   },
  disableHostCheck:true
  }

这是请求聚合数据的接口为列子

this.get('/toutiao/index?type=top&key=秘钥',{})
  .then((res)=>{
    if(res.error_code===0){
      resolve(res);
    }else{
      //这里抛出的异常被下面的catch所捕获
      reject(error);
    }
  })
  .catch((err)=>{
    console.log(err)
  })

返回数据

vue+axios+promise实际开发用法详解

使用promise

1.比如用户想请求url1接口完后再调url2接口

var promise = new Promise((resolve,reject)=>{
    let url1 = '/toutiao/index?type=top&key=秘钥'
    this.get(url,{})
    .then((res)=>{
      resolve(res);
    })
    .catch((err)=>{
      console.log(err)
    })
  });
  promise.then((res)=>{
    let url2 = '/toutiao/index?type=top&key=秘钥'
    this.get(ur2,{})
    .then((res)=>{
      //只有当url1请求到数据后才会调用url2,否则等待
      resolve(res);
    })
    .catch((err)=>{
      console.log(err)
    })
  })

Promise对象

  • Promise有三种状态
  • pending: 等待中,或者进行中,表示还没有得到结果
  • resolved: 已经完成,表示得到了我们想要的结果,可以继续往下执行
  • rejected: 也表示得到结果,但是由于结果并非我们所愿,因此拒绝执(用catch捕获异常)

这三种状态不受外界影响,而且状态只能从pending改变为resolved或者rejected,并且不可逆(顾名思义承诺的后的东西怎么又能返回呢)。在Promise对象的构造函数中,将一个函数作为第一个参数。而这个函数,就是用来处理Promise的状态变化

这里要注意,不管是then或者catch返回的都是一个新的Promise实例!而每个Primise实例都有最原始的Pending(进行中)到Resolve(已完成),或者Pending(进行中)到Reject(已失败)的过程

Promise基本用法

Promise.all()用法

var p = Promise.all([p1, p2, p3]);

all()接受数组作为参数。p1,p2,p3都是Promise的实例对象,p要变成Resolved状态需要p1,p2,p3状态都是Resolved,如果p1,p2,p3至少有一个状态是Rejected,p就会变成Rejected状态

Promise.race()用法

var p = new Promise( [p1,p2,p3] )

只要p1、p2、p3之中有一个实例率先改变状态,p的状态就跟着改变。那个率先改变的 Promise 实例的返回值,就传递给p的回调函数,p的状态就会改变Resolved状态

Promise resolve()用法

Promise.resolve('foo')
// 等价于
new Promise(resolve => resolve('foo'))

有时需要将现有对象转为Promise对象,Promise.resolve方法就起到这个作用.

Promise reject()用法

Promise.reject('foo')
// 等价于
new Promise(reject => reject('foo'))

Promise.reject(reason)方法也会返回一个新的 Promise 实例,该实例的状态为rejected。但是Promise.reject()方法的参数,会原封不动地作为reject的理由,变成后续方法的参数。这一点与Promise.resolve方法不一致。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
脚本吧 - 幻宇工作室用到js,超强推荐share.js
Dec 23 Javascript
js控制div及网页相关属性的代码
Dec 19 Javascript
jQuery实战之仿淘宝商城左侧导航效果
Apr 12 Javascript
推荐17个优美新鲜的jQuery的工具提示插件
Sep 14 Javascript
利用javascript实现全部删或清空所选的操作
May 27 Javascript
Node.js实现在目录中查找某个字符串及所在文件
Sep 03 Javascript
JavaScript的instanceof运算符学习教程
Jun 08 Javascript
angularJS 如何读写缓冲的方法(推荐)
Aug 06 Javascript
vue.js异步上传文件前后端实现代码
Aug 22 Javascript
Vue.directive()的用法和实例详解
Mar 04 Javascript
JS实现的tab页切换效果完整示例
Dec 18 Javascript
Vue最新防抖方案(必看篇)
Oct 30 Javascript
javascript中关于类型判断的一些疑惑小结
Oct 14 #Javascript
JS面试题大坑之隐式类型转换实例代码
Oct 14 #Javascript
JS中appendChild追加子节点无效的解决方法
Oct 14 #Javascript
详解ES6 Symbol 的用途
Oct 14 #Javascript
javascript实现文本框标签验证的实例代码
Oct 14 #Javascript
Vue+webpack项目配置便于维护的目录结构教程详解
Oct 14 #Javascript
单页面vue引入百度统计的使用方法示例详解
Oct 13 #Javascript
You might like
从零开始 教你如何搭建Discuz!4.1论坛
2006/07/07 PHP
java EJB 加密与解密原理的一个例子
2008/01/11 PHP
php5.2 Json不能正确处理中文、GB编码的解决方法
2014/03/28 PHP
Laravel手动返回错误码示例
2019/10/22 PHP
【消息提示组件】,兼容IE6/7&&FF2
2007/09/04 Javascript
JavaScript 笔记二 Array和Date对象方法
2010/05/22 Javascript
jquery异步循环获取功能实现代码
2010/09/19 Javascript
Jqgrid设置全选(选择)及获取选择行的值示例代码
2013/12/28 Javascript
jquery实现个人中心导航菜单效果和美观都非常不错
2014/09/02 Javascript
JS常用函数使用指南
2014/11/23 Javascript
jQuery实现选中弹出窗口选择框内容后赋值给文本框的方法
2015/11/23 Javascript
javascript 将共享属性迁移到原型中去的实现方法
2016/08/31 Javascript
javascript prototype原型详解(比较基础)
2016/12/26 Javascript
详谈for循环里面的break和continue语句
2017/07/20 Javascript
js封装成插件_Canvas统计图插件编写实例
2017/09/12 Javascript
利用jqprint插件打印页面内容的实现方法
2018/01/09 Javascript
如何以Angular的姿势打开Font-Awesome详解
2018/04/22 Javascript
jquery实现的分页显示功能示例
2019/08/23 jQuery
vue组件实现移动端九宫格转盘抽奖
2020/10/16 Javascript
nuxt.js服务端渲染中axios和proxy代理的配置操作
2020/11/06 Javascript
python使用fileinput模块实现逐行读取文件的方法
2015/04/29 Python
实例讲解Python编程中@property装饰器的用法
2016/06/20 Python
Python中的迭代器与生成器高级用法解析
2016/06/28 Python
Python+matplotlib绘制不同大小和颜色散点图实例
2018/01/19 Python
Python基于更相减损术实现求解最大公约数的方法
2018/04/04 Python
python实现列表中由数值查到索引的方法
2018/06/27 Python
python制作朋友圈九宫格图片
2019/11/03 Python
浅谈在django中使用redirect重定向数据传输的问题
2020/03/13 Python
HTML页面中添加Canvas标签示例
2015/01/01 HTML / CSS
财务会计专业求职信范文
2013/12/31 职场文书
旷课检讨书2000字
2014/01/14 职场文书
主题党日活动总结
2014/07/08 职场文书
国际贸易系求职信
2014/08/09 职场文书
食堂厨师岗位职责
2014/08/25 职场文书
医学生自荐信范文(2016精选篇)
2016/01/28 职场文书
2019个人工作态度自我评价
2019/04/24 职场文书