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 相关文章推荐
节点的插入之append()和appendTo()的用法介绍
Jan 13 Javascript
jquery.post用法之type设置问题
Feb 24 Javascript
JavaScript获取鼠标移动时的坐标(兼容IE8、chome谷歌、Firefox)
Sep 13 Javascript
JavaScript代码因逗号不规范导致IE不兼容的问题
Feb 25 Javascript
JavaScript实现简单的星星评分效果
May 18 Javascript
关于axios如何全局注册浅析
Jan 14 Javascript
JavaScript字符串转数字的5种方法及遇到的坑
Jul 16 Javascript
ES6基础之数组和对象的拓展实例详解
Aug 22 Javascript
在LayUI图片上传中,解决由跨域问题引起的请求接口错误的方法
Sep 24 Javascript
vue使用@scroll监听滚动事件时,@scroll无效问题的解决方法详解
Oct 15 Javascript
jquery插件实现搜索历史
Apr 24 jQuery
HTML+JS实现在线朗读器
Feb 15 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编写和读取XML的几种方式
2013/01/12 PHP
php二维数组转成字符串示例
2014/02/17 PHP
PHP APC缓存配置、使用详解
2014/03/06 PHP
PHP中使用foreach()遍历二维数组的简单实例
2016/06/13 PHP
JS正则表达式验证数字代码
2014/01/28 Javascript
js拖拽一些常见的思路方法整理
2014/03/19 Javascript
jQuery filter函数使用方法
2014/05/19 Javascript
JS实现往下不断流动网页背景的方法
2015/02/27 Javascript
jQuery控制Div拖拽效果完整实例分析
2015/04/15 Javascript
Node.js编写组件的三种实现方式
2016/02/25 Javascript
js+html5实现半透明遮罩层弹框效果
2020/08/24 Javascript
jQuery实现验证表单密码一致性及正则表达式验证邮箱、手机号的方法
2017/12/05 jQuery
详解单页面路由工程使用微信分享及二次分享解决方案
2019/02/22 Javascript
JS原型和原型链原理与用法实例详解
2020/02/05 Javascript
[01:10:16]DOTA2上海特级锦标赛B组资格赛#2 Fnatic VS Spirit第一局
2016/02/27 DOTA
python装饰器decorator介绍
2014/11/21 Python
通过Py2exe将自己的python程序打包成.exe/.app的方法
2018/05/26 Python
pytorch 数据集图片显示方法
2018/07/26 Python
Python全局变量与局部变量区别及用法分析
2018/09/03 Python
利用Python+阿里云实现DDNS动态域名解析的方法
2019/04/01 Python
python实现一个函数版的名片管理系统过程解析
2019/08/27 Python
Tensorflow 实现分批量读取数据
2020/01/04 Python
实例讲解使用CSS实现多边框和透明边框的方法
2015/09/08 HTML / CSS
Nuts.com:优质散装,批发坚果、干果和巧克力等
2017/03/21 全球购物
.NET方向面试题
2014/11/20 面试题
编辑求职信样本
2013/12/16 职场文书
2014司机年终工作总结
2014/12/05 职场文书
关于幸福的感言
2015/08/03 职场文书
教师研修随笔感言
2015/11/18 职场文书
毕业欢送晚会主持词
2019/06/25 职场文书
golang 在windows中设置环境变量的操作
2021/04/29 Golang
如何用Navicat操作MySQL
2021/05/12 MySQL
MySQL 5.7常见数据类型
2021/07/15 MySQL
nginx安装以及配置的详细过程记录
2021/09/15 Servers
B站评分公认最好看的动漫,你的名字评分9.9,第六备受喜欢
2022/03/18 日漫
在MySQL中你成功的避开了所有索引
2022/04/20 MySQL