vue axios 简单封装以及思考

更新时间：2018年10月09日 15:54:31 作者：huangenai

axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端。这篇文章主要介绍了vue axios 简单封装以及思考 ,需要的朋友可以参考下

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: "网络异常"
   });
  }
 });
}

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

您可能感兴趣的文章:

解决betterScroll在vue中存在图片时,出现拉不动的问题
今天小编就为大家分享一篇解决betterScroll在vue中存在图片时,出现拉不动的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-09-09
VUE项目去除input 框值所有空格的操作方法
这篇文章主要介绍了VUE项目去除input 框值所有空格的操作方法，主要包括去除空格的方法、正则和element ui写法，本文给大家讲解的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2022-10-10
vue中watch的实际开发学习笔记
watch是Vue实例的一个属性是用来响应数据的变化,需要在数据变化时执行异步或开销较大的操作时,这个方式是最有用的,下面这篇文章主要给大家介绍了关于vue中watch的实际开发笔记,需要的朋友可以参考下
2022-11-11
Vue手写防抖和节流函数代码详解
在Vue中函数的防抖和节流不是什么新鲜话题,这篇文章主要给大家介绍了关于Vue3中防抖/节流的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2023-02-02
Vue.js用法详解
Vue.js（读音 /vjuː/, 类似于 view）是一套构建用户界面的渐进式框架。这篇文章主要介绍了Vue.js用法详解,需要的朋友可以参考下
2017-11-11
Vue 项目的成功发布和部署的实现
本文主要介绍了Vue 项目的成功发布和部署的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-05-05
Vue中的基础过渡动画及实现原理解析
这篇文章主要介绍了Vue中的基础过渡动画原理解析,需要的朋友可以参考下
2018-12-12
Vuex的初探与实战小结
这篇文章主要介绍了Vuex的初探与实战小结，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-11-11
vue-router的两种模式的区别
这篇文章主要介绍了vue-router的两种模式的区别，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
2019-05-05
手写可拖动穿梭框组件CustormTransfer vue实现示例
这篇文章主要为大家介绍了手写可拖动穿梭框组件CustormTransfer vue实现示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-11-11