详解Vue 2.0封装axios笔记


Posted in Javascript onJune 22, 2017

前言

单页面应用大多采用前后端分离开发思路,我们知道,前端和后端交互有多中方式(服务器端渲染、Ajax、websocket等),今天我们主要讲解Ajax部分。

最近团队讨论了一下,Ajax 本身跟 Vue 并没有什么需要特别整合的地方,使用 fetch polyfill 或是 axios、superagent 等等都可以起到同等的效果,vue-resource 提供的价值和其维护成本相比并不划算,所以决定在不久以后取消对 vue-resource 的官方推荐。已有的用户可以继续使用,但以后不再把 vue-resource 作为官方的 ajax 方案。

vue更新至2.0之后,官方推荐的Ajax插件库是axios,而不再是vue-resource,理由如上。

axios快速使用

如何安装请移步axios,文档描述的很清楚。

常见用法

其实我们用的最多的就是get、post请求。

Performing a GET request

// get
axios.get('/user', {
  params: {
   ID: 12345
  }
 })
 .then(function (response) {
  console.log(response);
 })
 .catch(function (error) {
  console.log(error);
 });

Performing a POST request

axios.post('/user' , {
 params: {
  firstName: 'Fred',
  lastName: 'Flintstone'
 }
})
 .then(function (response) {
  console.log(response);
 })
 .catch(function (error) {
  console.log(error);
 });

掌握了以上两种最基本的用法,我们已经可以去进行开发了。

示例demo

演示了如何使用axios请求cnode社区的API。

请点击这里

axios的封装

上一步已经实现用axios请求网络资源,那为什么要封装axios呢?

以下几点原因:

  1. 配置通用项
  2. 统一处理请求错误,进行提示

完整源码

请点击这里

请求流程

详解Vue 2.0封装axios笔记

请求失败

通常请求失败有两种原因:

  1. 网络异常/服务器宕机
  2. 后端抛出错误

每个后端在请求失败时返回的数据结构大同小异,前后端可以商量好,我的后台返回给我的请求失败接口如下:

{
 "status": 1,
 "msg": "购物车为空",
 "success": false
}

如果只是普通用法,如下所示:

axios.post('/user' , {
 params: {
  firstName: 'Fred',
  lastName: 'Flintstone'
 }
})
 .then(function (response) {
  // 处理响应
  // 其中存在后端返回的错误
 })
 .catch(function (error) {
  // 网络异常引发的错误
 });

我们知道,一般中大型规模的项目,请求是比较多的,这样导致代码冗余,会越来越臃肿,我们可以对错误进行预处理。

拦截器

在普通用法中,then()处理响应,catch()处理错误,通过拦截器,可以提前判断,并返回二者之一。

这里并没有在拦截器中对错误进行处理,而是将响应或者错误返回到get/post请求的结果中,通过链式处理。

// 请求时的拦截
axios.interceptors.request.use(function (config) {
  // 发送请求之前做一些处理
  return config;
 }, function (error) {
  // 当请求异常时做一些处理
  return Promise.reject(error);
 });

// 响应时拦截
axios.interceptors.response.use(function (response) {
  // 返回响应时做一些处理
  return response;
 }, function (error) {
  // 当响应异常时做一些处理
  return Promise.reject(error);
 });

封装get,post方法

封装的get/post方法由3部分组成:

详解Vue 2.0封装axios笔记

基本配置

包括请求方法,基础url,相对url,参数,超时时间,请求头等。

checkStatus()

链式处理第一步,判断http状态码是否正常,和拦截器一样,请求正常则返回响应,请求异常则返回错误,最后返回结果给checkCode()。

checkCode()

链式处理第二步,处理上一步的结果,分别处理网络异常,以及后端返回的异常。

在组件中引用

引入封装后的axios

import http from '../utils/http'
import api from '../utils/api'

使用方法

fetchData: async function () {
   let params = {
   }
   const res = await http.get(api.right, params)
   if (res.data.success) {
    alert('请求成功')
   }
  }

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

Javascript 相关文章推荐
js模拟实现Array的sort方法
Dec 11 Javascript
js window.event对象详尽解析
Feb 17 Javascript
Ext对基本类型的扩展 ext,extjs,format
Dec 25 Javascript
js转化毫秒为时间格式代码
Apr 10 Javascript
HTML页面弹出居中可拖拽的自定义窗口层
May 07 Javascript
jQuery+ThinkPHP+Ajax实现即时消息提醒功能实例代码
Mar 21 jQuery
分享Bootstrap简单表格、表单、登录页面
Aug 04 Javascript
Angular模板表单校验方法详解
Aug 11 Javascript
原生js的ajax和解决跨域的jsonp(实例讲解)
Oct 16 Javascript
红黑树的插入详解及Javascript实现方法示例
Mar 26 Javascript
微信小程序前端自定义分享的实现方法
Jun 13 Javascript
js实现html滑动图片拼图验证
Jun 24 Javascript
EasyUI中的dataGrid的行内编辑
Jun 22 #Javascript
Ajax高级笔记 JavaScript高级程序设计笔记
Jun 22 #Javascript
vue 请求后台数据的实例代码
Jun 22 #Javascript
深入理解vue.js中的v-if和v-show
Jun 22 #Javascript
vue如何从接口请求数据
Jun 22 #Javascript
利用node.js制作命令行工具方法教程(一)
Jun 22 #Javascript
关于在vue-cli中使用微信自动登录和分享的实例
Jun 22 #Javascript
You might like
中国第一家无线电行
2021/03/01 无线电
如何选购合适的收音机
2021/03/01 无线电
如何在PHP中使用正则表达式进行查找替换
2013/06/13 PHP
php使用多个进程同时控制文件读写示例
2014/02/28 PHP
php获取目标函数执行时间示例
2014/03/04 PHP
PHP 文件上传限制问题
2019/09/01 PHP
nodejs实用示例 缩址还原
2010/12/28 NodeJs
动态载入js提高网页打开速度的方法
2014/07/04 Javascript
javascript学习笔记整理(概述、变量、数据类型简介)
2015/10/25 Javascript
jQuery获取checkbox选中的值
2016/01/28 Javascript
jQuery选取所有复选框被选中的值并用Ajax异步提交数据的实例
2017/08/04 jQuery
jQuery选择器之子元素选择器详解
2017/09/18 jQuery
node.js支持多用户web终端实现及安全方案
2017/11/29 Javascript
基于vue 添加axios组件,解决post传参数为null的问题
2018/03/05 Javascript
jquery 动态遍历select 赋值的实例
2018/09/12 jQuery
创建echart多个联动的示例代码
2018/11/23 Javascript
深入理解令牌认证机制(token)
2019/08/22 Javascript
Vue.js获取手机系统型号、版本、浏览器类型的示例代码
2020/05/10 Javascript
在 Django/Flask 开发服务器上使用 HTTPS
2014/07/03 Python
详解Python中的条件判断语句
2015/05/14 Python
python实现redis三种cas事务操作
2017/12/19 Python
OpenCV图像颜色反转算法详解
2019/05/13 Python
如何安装并使用conda指令管理python环境
2019/07/10 Python
python中如何实现将数据分成训练集与测试集的方法
2019/09/13 Python
PyCharm导入python项目并配置虚拟环境的教程详解
2019/10/13 Python
使用Django搭建一个基金模拟交易系统教程
2019/11/18 Python
Python操作Sonqube API获取检测结果并打印过程解析
2019/11/27 Python
python 监测内存和cpu的使用率实例
2019/11/28 Python
python带参数打包exe及调用方式
2019/12/21 Python
如何利用pygame实现简单的五子棋游戏
2019/12/29 Python
pandas分批读取大数据集教程
2020/06/06 Python
自我鉴定范文
2013/11/10 职场文书
教师党员先进性教育自我剖析材料思想汇报
2014/09/24 职场文书
演讲比赛通讯稿
2015/07/18 职场文书
女方家长婚礼致辞
2015/07/27 职场文书
大队委员竞选演讲稿
2015/11/20 职场文书