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 学习第七课 扩展jQuery的功能 插件开发
May 17 Javascript
鼠标滚轮控制网页横向移动实现思路
Mar 22 Javascript
jquery果冻抖动效果实现方法
Jan 15 Javascript
JS基础随笔(菜鸟必看篇)
Jul 13 Javascript
js表单登陆验证示例
Oct 19 Javascript
Javascript 函数的四种调用模式
Nov 05 Javascript
基于bootstrap的选择框插件icheck
Dec 23 Javascript
一个例子轻松学会Vue.js
Jan 02 Javascript
vue实现全选和反选功能
Aug 31 Javascript
vue.js实现格式化时间并每秒更新显示功能示例
Jul 07 Javascript
layui动态渲染生成左侧3级菜单的方法(根据后台返回数据)
Sep 23 Javascript
手写Spirit防抖函数underscore和节流函数lodash
Mar 22 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
linux下为php添加iconv模块的方法
2016/02/28 PHP
php5.3后静态绑定用法详解
2016/11/11 PHP
PHP实现图片的等比缩放和Logo水印功能示例
2017/05/04 PHP
Laravel接收前端ajax传来的数据的实例代码
2017/07/20 PHP
laravel通过a标签从视图向控制器实现传值
2019/10/15 PHP
用php实现分页效果的示例代码
2020/12/10 PHP
xml 与javascript结合的问题解决方法
2007/03/24 Javascript
Node.js 学习笔记之简介、安装及配置
2015/03/03 Javascript
jQuery实现仿新浪微博浮动的消息提示框(可智能定位)
2015/10/10 Javascript
JQuery插件Marquee.js实现无缝滚动效果
2016/04/26 Javascript
JavaScript语言精粹经典实例(整理篇)
2016/06/07 Javascript
javascript之Array 数组对象详解
2016/06/07 Javascript
js仿新浪微博消息发布功能
2017/02/17 Javascript
详解Angular2表单-模板驱动的表单(Template-Driven Forms)
2017/08/04 Javascript
prototype.js简单实现ajax功能示例
2017/10/18 Javascript
基于Vue的SPA动态修改页面title的方法(推荐)
2018/01/02 Javascript
深入koa-bodyparser原理解析
2019/01/16 Javascript
详解ES6中的Map与Set集合
2019/03/22 Javascript
利用JS代码自动删除稿件的普通弹幕功能
2019/09/20 Javascript
Vue axios 将传递的json数据转为form data的例子
2019/10/29 Javascript
小程序实现简单语音聊天的示例代码
2020/07/24 Javascript
Centos5.x下升级python到python2.7版本教程
2015/02/14 Python
pandas DataFrame 根据多列的值做判断,生成新的列值实例
2018/05/18 Python
详解Python如何生成词云的方法
2018/06/01 Python
Python 2.7中文显示与处理方法
2018/07/16 Python
对numpy下的轴交换transpose和swapaxes的示例解读
2019/06/26 Python
浅谈pytorch grad_fn以及权重梯度不更新的问题
2019/08/20 Python
python爬虫使用requests发送post请求示例详解
2020/08/05 Python
html5 canvas绘制网络字体的常用方法
2019/08/26 HTML / CSS
澳洲女装时尚在线:Blue Bungalow
2018/05/05 全球购物
青年文明号服务承诺
2014/03/31 职场文书
水利水电建筑施工应届生求职信
2014/07/04 职场文书
医生党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
乡镇领导干部个人对照检查材料思想汇报
2014/09/23 职场文书
关于flex 上下文中自动 margin的问题(完整例子)
2021/05/20 HTML / CSS
Django Paginator分页器的使用示例
2021/06/23 Python