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 相关文章推荐
Domino中运用jQuery读取视图内容的方法
Oct 21 Javascript
js实现在同一窗口浏览图片
Sep 17 Javascript
js鼠标悬浮出现遮罩层的方法
Jan 28 Javascript
纯JS实现旋转图片3D展示效果
Apr 12 Javascript
jQuery实现可用于博客的动态滑动菜单完整实例
Sep 17 Javascript
JS中使用apply方法通过不同数量的参数调用函数的方法
May 31 Javascript
js字符串引用的两种方式(必看)
Sep 18 Javascript
用Vue.js实现监听属性的变化
Nov 17 Javascript
移动开发之自适应手机屏幕宽度
Nov 23 Javascript
mint-ui 时间插件使用及获取选择值的方法
Feb 09 Javascript
在vue中使用v-bind:class的选项卡方法
Sep 27 Javascript
JavaScript逻辑运算符相关总结
Sep 04 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
PHP学习之PHP表达式
2006/10/09 PHP
mysql 字段类型说明
2007/04/27 PHP
PHP生成指定随机字符串的简单实现方法
2015/04/01 PHP
PHP中Trait及其应用详解
2017/02/14 PHP
PHP基于pdo的数据库操作类【可支持mysql、sqlserver及oracle】
2018/05/21 PHP
PHP观察者模式定义与用法实例分析
2019/03/22 PHP
js使用ajax读博客rss示例
2014/05/06 Javascript
jQuery中element选择器用法实例
2014/12/29 Javascript
jquery trigger函数执行两次的解决方法
2016/02/29 Javascript
如何使用Bootstrap的modal组件自定义alert,confirm和modal对话框
2016/03/01 Javascript
jQuery对象的链式操作用法分析
2016/05/10 Javascript
js实现数字递增特效【仿支付宝我的财富】
2017/05/05 Javascript
layui文件上传实现代码
2017/05/20 Javascript
Angular 通过注入 $location 获取与修改当前页面URL的实例
2017/05/31 Javascript
实现微信小程序的wxml文件和wxss文件在webstrom的支持
2017/06/12 Javascript
JavaScript之DOM_动力节点Java学院整理
2017/07/03 Javascript
详解webpack与SPA实践之开发环境搭建
2017/12/18 Javascript
微信小程序 调用微信授权窗口相关问题解决
2019/07/25 Javascript
javascript实现雪花飘落效果
2020/08/19 Javascript
JavaScript中arguments的使用方法详解
2020/12/20 Javascript
[46:48]DOTA2上海特级锦标赛A组小组赛#2 Secret VS CDEC第三局
2016/02/25 DOTA
[50:24]VGJ.S vs Pain 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
tornado捕获和处理404错误的方法
2014/02/26 Python
Python CSV模块使用实例
2015/04/09 Python
Python的Django框架中的Context使用
2015/07/15 Python
对Python中DataFrame按照行遍历的方法
2018/04/08 Python
python构建基础的爬虫教学
2018/12/23 Python
python能做哪些生活有趣的事情
2020/09/09 Python
python中turtle库的简单使用教程
2020/11/11 Python
使用HTML5里的classList操作CSS类
2016/06/28 HTML / CSS
LEGO玩具英国官方商店:LEGO Shop GB
2018/03/27 全球购物
美国伴娘礼服商店:Evening Collective
2019/10/07 全球购物
《鸿门宴》教学反思
2014/04/22 职场文书
三八活动策划方案
2014/08/17 职场文书
项目投资意向书范本
2015/05/09 职场文书
服务器nginx权限被拒绝解决案例
2022/09/23 Servers