vue axios 简单封装以及思考

phoenixsky 发布于2019-04-23 13:19 / 2951人阅读

摘要：先安装的详细介绍以及用法就不多说了请移步下面是简单的封装一个，在此说明这个方法呢是不一定需要的，根据个人的项目需求吧，也可以直接返回，交给后面另行处理也行。或者根据后端返回的状态，在里面进行处理也行。

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

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

代码已上传到github： https://github.com/huangenai/axios-hea

此随笔乃本人学习工作记录，如有疑问欢迎在下面评论，转载请标明出处。

如果对您有帮助请动动鼠标右下方给我来个赞，您的支持是我最大的动力。

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1724.html

当大多数人对Vue理解到炉火纯青的时候，是不是该思考一下怎么让vue页面骚气起来

写在前面当大多数人Vue理解的炉火纯青的时候，你应该思考怎么让vue页面骚气起来，下面就我个人在接触Vue两年的时间里，在实际工作中门户网站在前端页面交互应用和技巧，炒几道小菜给大家分享一哈，我把它封装成一个项目vue-portal-webUI（github源码），不敢说是UI，但也是各种常见常遇到的情景吧，看懂代码需要一些vue、axios、es6、scss基础、数据基本上是mock，功能和场...

lingdududu 2019-08-26 12:12 评论0 收藏0
Vue开发总结及一些最佳实践（已更新）

摘要：基本开发环境创建的项目，作为代码编写工具插件推荐插件配置文章目录项目目录结构介绍框架选择处理请求二次封装项目目录结构简介业务相关静态文件全局组件基础样式布局样式及工具引入请求配置路由全局状态管理工具文件入口文件主要配置文件页面检查配置测试基本开发环境 vue-cli3 创建的项目，vscode 作为代码编写工具vscode插件推荐：vscode 插件配置文章目录项目目录结构介绍...

NotFound 2019-08-26 13:47 评论0 收藏0
vue封装axios基本思路

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。在vue项目之中使用axios是一个非常明智的选择，因为vue官方已经宣称不再维护vue-resource,并且推荐使用axios. 1 为什么选择axios？使用axios可以统一做请求-响应拦截，例如响应时我们将响应信息拦截起来，判断状态码，从而弹出报错信息设定请求超时,例如3000ms未响应...

microcosm1994 2019-08-26 12:10 评论0 收藏0
VUE知识点集锦

摘要：载入前后在阶段，实例的和都初始化了，但还是挂载之前为虚拟的节点，还未替换。类似于，不同在于提交的是，而不是直接变更状态可以包含任意异步操作。 vue基础 1、 router 路由与 a 标签的区别：https://www.jianshu.com/p/34b...2、 VUE双向绑定的原理：答：VUE实现双向数据绑定的原理就是利用了 Object.defineProperty() 这个...

Tecode 2019-08-23 16:02 评论0 收藏0
VUE知识点集锦

摘要：载入前后在阶段，实例的和都初始化了，但还是挂载之前为虚拟的节点，还未替换。类似于，不同在于提交的是，而不是直接变更状态可以包含任意异步操作。 vue基础 1、 router 路由与 a 标签的区别：https://www.jianshu.com/p/34b...2、 VUE双向绑定的原理：答：VUE实现双向数据绑定的原理就是利用了 Object.defineProperty() 这个...

APICloud 2019-08-02 14:34 评论0 收藏0