详解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执行顺序
Nov 09 Javascript
浅析jQuery的链式调用之each函数
Dec 03 Javascript
javascript跑马灯悬停放大效果实现代码
Dec 12 Javascript
js仿百度贴吧验证码特效实例代码
Jan 16 Javascript
推荐5 个常用的JavaScript调试技巧
Jan 08 Javascript
深入理解JavaScript系列(46):代码复用模式(推荐篇)详解
Mar 04 Javascript
jQuery实现边框动态效果的实例代码
Sep 23 Javascript
简单理解Vue条件渲染
Dec 03 Javascript
jQuery插件zTree实现获取一级节点数据的方法
Mar 08 Javascript
JavaScript数据结构之数组的表示方法示例
Apr 12 Javascript
H5+C3+JS实现五子棋游戏(AI篇)
May 28 Javascript
JS前端轻量fabric.js系列物体基类
Aug 05 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
DISCUZ在win2003环境下 Unable to access ./include/common.inc.php in... 的问题终极解决方案
2011/11/21 PHP
ThinkPHP结合ajax、Mysql实现的客户端通信功能代码示例
2014/06/23 PHP
php使用正则验证中文
2016/04/06 PHP
Yii2汉字转拼音类的实例代码
2017/04/18 PHP
Laravel中的Auth模块详解
2017/08/17 PHP
PHP实现从PostgreSQL数据库检索数据分页显示及根据条件查找数据示例
2018/06/09 PHP
特殊字符、常规符号及其代码对照表
2006/06/26 Javascript
利用jQuery 实现GridView异步排序、分页的代码
2010/02/06 Javascript
JavaScript游戏之是男人就下100层代码打包
2010/11/08 Javascript
JavaScript 学习笔记之操作符(续)
2015/01/14 Javascript
JavaScript将Web页面内容导出到Word及Excel的方法
2015/02/13 Javascript
深入剖析JavaScript编程中的对象概念
2015/10/21 Javascript
JavaScript如何动态创建table表格
2020/08/02 Javascript
Vue2.0实现购物车功能
2017/06/05 Javascript
vue.js模仿京东省市区三级联动的选择组件实例代码
2017/11/22 Javascript
使用vue-router与v-if实现tab切换遇到的问题及解决方法
2018/09/07 Javascript
详解JS预解析原理
2020/06/16 Javascript
微信小程序实现发微博功能的示例代码
2020/06/24 Javascript
ES6中的类(Class)示例详解
2020/12/09 Javascript
python 接口_从协议到抽象基类详解
2017/08/24 Python
如何在sae中设置django,让sae的工作环境跟本地python环境一致
2017/11/21 Python
Python cookbook(字符串与文本)针对任意多的分隔符拆分字符串操作示例
2018/04/19 Python
Python3内置模块之base64编解码方法详解
2019/07/13 Python
django框架两个使用模板实例
2019/12/11 Python
python爬虫工具例举说明
2020/11/30 Python
python 多线程爬取壁纸网站的示例
2021/02/20 Python
连卡佛中国官网:Lane Crawford中文站
2018/01/27 全球购物
岗位职责的含义
2013/11/17 职场文书
中学教师管理制度
2014/01/14 职场文书
我的中国梦演讲稿600字
2014/08/19 职场文书
领导班子四风表现材料
2014/08/23 职场文书
2014大学生批评与自我批评思想汇报
2014/09/21 职场文书
优秀班主任事迹材料
2014/12/16 职场文书
小学同学聚会感言
2015/07/30 职场文书
PyTorch中permute的使用方法
2022/04/26 Python
postgresql之greenplum字符串去重拼接方式
2023/05/08 PostgreSQL