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 相关文章推荐
Firebug 字幕文件JSON地址获取代码
Oct 28 Javascript
IE6、IE7中setAttribute不支持class/for/rowspan/colspan等属性
Aug 28 Javascript
解决js数据包含加号+通过ajax传到后台时出现连接错误
Aug 01 Javascript
写出高效jquery代码的19条指南
Mar 19 Javascript
JS获取中文拼音首字母并通过拼音首字母快速查找页面内对应中文内容的方法【附demo源码】
Aug 19 Javascript
Vue.js实现一个自定义分页组件vue-paginaiton
Sep 05 Javascript
CSS3+JavaScript实现翻页幻灯片效果
Jun 28 Javascript
vue实现移动端图片裁剪上传功能
Aug 18 Javascript
JS中利用swiper实现3d翻转幻灯片实例代码
Aug 25 Javascript
通过vue提供的keep-alive减少对服务器的请求次数
Apr 01 Javascript
微信小程序使用echarts获取数据并生成折线图
Oct 16 Javascript
解决vue watch数据的方法被调用了两次的问题
Nov 07 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
深入PHP中慎用双等于(==)的详解
2013/06/06 PHP
基于PHP5魔术常量与魔术方法的详解
2013/06/13 PHP
浅析php header 跳转
2013/06/17 PHP
IE event.srcElement和FF event.target 功能比较
2010/03/01 Javascript
可以将word转成html的js代码
2010/04/11 Javascript
javascript 内存回收机制理解
2011/01/17 Javascript
JavaScript基本编码模式小结
2012/05/23 Javascript
JS定时器实例详细分析
2013/10/11 Javascript
js 将json字符串转换为json对象的方法解析
2013/11/13 Javascript
JQuery表单验证插件EasyValidator用法分析
2014/11/15 Javascript
JavaScript事件委托技术实例分析
2015/02/06 Javascript
Jquery幻灯片特效代码分享--鼠标点击按钮时切换(1)
2015/08/15 Javascript
JS实现的倒计时效果实例(2则实例)
2015/12/23 Javascript
使用JQuery 加载页面时调用JS的实现方法
2016/05/30 Javascript
BootStrap学习系列之Bootstrap Typeahead 组件实现百度下拉效果(续)
2016/07/07 Javascript
js在ie下打开对话窗口的方法小结
2016/10/24 Javascript
详解JSON1:使用TSQL查询数据和更新JSON数据
2016/11/21 Javascript
微信小程序模板之分页滑动栏
2017/02/10 Javascript
基于Bootstrap表单验证功能
2017/11/17 Javascript
JavaScript事件冒泡与事件捕获实例分析
2018/08/01 Javascript
解决vue router组件状态刷新消失的问题
2018/08/01 Javascript
微信小程序实现文字从右向左无限滚动
2020/11/18 Javascript
javascript定时器的简单应用示例【控制方块移动】
2019/06/17 Javascript
原生JavaScript实现日历功能代码实例(无引用Jq)
2019/09/23 Javascript
详解vue路由
2020/08/05 Javascript
[42:35]2018DOTA2亚洲邀请赛3月30日 小组赛A组 VG VS OpTic
2018/03/31 DOTA
python获取当前用户的主目录路径方法(推荐)
2017/01/12 Python
浅析Python中的赋值和深浅拷贝
2017/08/15 Python
python利用socketserver实现并发套接字功能
2018/01/26 Python
Python SMTP发送邮件遇到的一些问题及解决办法
2018/10/24 Python
python字符串的拼接方法总结
2019/11/18 Python
西班牙电子产品购物网站:Electronicamente
2018/07/26 全球购物
英国奢华护肤、美容和Spa品牌:Temple Spa
2019/11/02 全球购物
法学专业自我鉴定
2014/02/05 职场文书
银行贷款承诺书
2014/03/29 职场文书
文明单位申报材料
2014/12/23 职场文书