vue axios 简单封装以及思考


Posted in Javascript onOctober 09, 2018

axios 简介

axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,它本身具有以下特征:

--------------------------------------------------------------------------------
•从浏览器中创建 XMLHttpRequest
•从 node.js 发出 http 请求
•支持 Promise API
•拦截请求和响应
•转换请求和响应数据
•取消请求
•自动转换JSON数据
•客户端支持防止 CSRF/XSRF

先安装 axios

npm install axios

axios的详细介绍以及用法 就不多说了请 移步 github ➡️  https://github.com/axios/axios

下面是简单的封装一个 http.js, 在此说明  checkStatus 这个方法呢 是不一定需要的 ,根据个人的项目需求吧,也可以直接返回response,交给后面另行处理也行。

或者根据后端返回的状态,在里面进行处理 也行。

"use strict";
import axios from "axios";
import qs from "qs";
//添加请求拦截器
axios.interceptors.request.use(
 config => {
  return config;
 },
 error => {
  return Promise.reject(error);
 }
);
//添加响应拦截器
axios.interceptors.response.use(
 response => {
  return response;
 },
 error => {
  return Promise.resolve(error.response);
 }
);
axios.defaults.baseURL = "https://www.xxxx/api";
axios.defaults.headers.post["Content-Type"] = "application/json";
axios.defaults.headers.post["X-Requested-With"] = "XMLHttpRequest";
axios.defaults.timeout = 10000;
function checkStatus(response) {
 return new Promise((resolve, reject) => {
  if (
   response &&
   (response.status === 200 ||
    response.status === 304 ||
    response.status === 400)
  ) {
   resolve(response.data);
  } else {
   reject({
    state: "0",
    message: "网络异常"
   });
  }
 });
}
export default {
 post(url, params) {
  return axios({
   method: "post",
   url,
   data: params
  }).then(response => {
   return checkStatus(response);
  });
 },
 get(url, params) {
  params = qs.stringify(params);
  return axios({
   method: "get",
   url,
   params
  }).then(response => {
   return checkStatus(response);
  });
 }
};

在vue 项目中,main.js这个文件

import http from "./utils/http";
Vue.prototype.$http = http;

使用 helloworld.vue

...
methods: {
  async TestPost() {
   try {
    const res = await this.$http.post("/message/socketid", {
     account: "huangenai"
    });
    console.log(res);
   } catch (error) {
    console.log(error);
   }
  },
  async TestGet() {
   this.$http
    .get("/price")
    .then(res => {
     console.log(res);
    })
    .catch(error => {
     alert(error);
    });
  }
}
....

在main.js中将http.js import 进来 并暴露到全局使用,在任何vue 页面中 就不再需要 import http.js了,而直接通过 this.$http.post this.$http.get 来使用,在checkStatus中统一异步返回,顺便可以处理错误的情况。

个人思考:

checkStatus方法 返回了一个 Promise

链式结构的话看上面那个get的方法,this.$http.get(...).then(...).catch(...),如果then 里面又来一个 http请求 会一层包住一层。

如果使用了语法糖 async  await  ,虽然 看起来好像是简单了 不用 一层包住一层 层层嵌套,可是你必须要用到 try catch,如果出现异常 则直接到catch,不会再执行下面到方法。如果再实际业务中,就算出现了某一个http请求失败到情况,不影响下面的逻辑要继续跑下去呢,这个就不适用了。链式结构也是 如果catch到异常 也不会执行then 里面到方法了。

所以,是否把返回的Promise,全部都返回的是 resolve,那么 就不会说出现直接到了 catch 里面不执行以下的业务了逻辑了呢。而且如果使用了语法糖 await 代码看起来更加简洁 也不需要 try catch了, 这样的话 reject是不是就不需要用到了呢。

function checkStatus(response) {
 return new Promise(resolve => {
  if (
   response &&
   (response.status === 200 ||
    response.status === 304 ||
    response.status === 400)
  ) {
   resolve(response.data);
  } else {
   resolve({
    state: "0",
    message: "网络异常"
   });
  }
 });
}

个人觉得这两种方案各有优劣,实际应用中还是应该根据个人业务需求 业务情况而定。

Javascript 相关文章推荐
加载jQuery后$冲突的解决办法
Jul 09 Javascript
javascript 伪数组实现方法
Oct 11 Javascript
jquery fancybox ie6不显示关闭按钮的解决办法
Dec 25 Javascript
javaScript对文字按照拼音排序实现代码
Dec 27 Javascript
JavaScript中创建字典对象(dictionary)实例
Mar 31 Javascript
javascript最基本的函数汇总
Jun 25 Javascript
javascript瀑布流布局实现方法详解
Feb 17 Javascript
Angularjs 实现动态添加控件功能
May 25 Javascript
weex里Vuex state使用storage持久化详解
Sep 09 Javascript
js动态引入的四种方法
May 05 Javascript
详解vue 自定义marquee无缝滚动组件
Apr 09 Javascript
基于Element的组件改造的树形选择器(树形下拉框)
Feb 27 Javascript
angularJS实现不同视图同步刷新详解
Oct 09 #Javascript
对angular 实时更新模板视图的方法$apply详解
Oct 09 #Javascript
AngularJs返回前一页面时刷新一次前面页面的方法
Oct 09 #Javascript
详解js模板引擎art template数组渲染的方法
Oct 09 #Javascript
angular4强制刷新视图的方法
Oct 09 #Javascript
Angular4.x Event (DOM事件和自定义事件详解)
Oct 09 #Javascript
Vue官方推荐AJAX组件axios.js使用方法详解与API
Oct 09 #Javascript
You might like
基于文本的访客签到簿
2006/10/09 PHP
PHP中两个float(浮点数)比较实例分析
2015/09/27 PHP
PHP实现获取第一个中文首字母并进行排序的方法
2017/05/09 PHP
PHP命名空间与自动加载机制的基础介绍
2019/08/25 PHP
tp5框架前台无限极导航菜单类实现方法分析
2020/03/29 PHP
CheckBoxList多选样式jquery、C#获取选择项
2013/09/06 Javascript
JQuery页面图片切换和新闻列表滚动效果的具体实现
2013/09/26 Javascript
JS的参数传递示例介绍
2014/02/08 Javascript
jQuery操作select下拉框的text值和value值的方法
2014/05/31 Javascript
Nodejs极简入门教程(三):进程
2014/10/27 NodeJs
兼容Firefox的Javascript XSLT 处理XML文件
2014/12/31 Javascript
js 中获取制定的cook信息实现方法
2016/11/19 Javascript
jQuery 常见小例汇总
2016/12/14 Javascript
js获取地址栏参数的两种方法
2017/06/27 Javascript
JS 学习总结之正则表达式的懒惰性和贪婪性
2017/07/03 Javascript
详解node nvm进行node多版本管理
2017/10/21 Javascript
JavaScrip关于创建常量的知识点
2017/12/07 Javascript
微信小程序tab切换可滑动切换导航栏跟随滚动实现代码
2019/09/04 Javascript
vue改变循环遍历后的数据实例
2019/11/07 Javascript
JQuery常用简单动画操作方法回顾与总结
2019/12/07 jQuery
用python + hadoop streaming 分布式编程(一) -- 原理介绍,样例程序与本地调试
2014/07/14 Python
Python中使用hashlib模块处理算法的教程
2015/04/28 Python
Python查询阿里巴巴关键字排名的方法
2015/07/08 Python
简介二分查找算法与相关的Python实现示例
2015/08/26 Python
基于树莓派的语音对话机器人
2019/06/17 Python
常用python爬虫库介绍与简要说明
2020/01/25 Python
利用Python实现Excel的文件间的数据匹配功能
2020/06/16 Python
解决Keras TensorFlow 混编中 trainable=False设置无效问题
2020/06/28 Python
Python3爬虫关于识别检验滑动验证码的实例
2020/07/30 Python
css3 transform 3d 使用css3创建动态3d立方体(html5实践)
2013/01/06 HTML / CSS
蹦床仓库:Trampoline Warehouse
2018/12/06 全球购物
残疾人小组计划书
2014/04/27 职场文书
部队反四风对照检查材料
2014/09/26 职场文书
物业项目经理岗位职责
2015/04/01 职场文书
采购内勤岗位职责
2015/04/13 职场文书
2015年乡镇纪检工作总结
2015/04/22 职场文书