Erlo

vue axios 简单封装以及思考

时间:2018-10-11 09:58   阅读:14次   来源:博客园页面报错

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

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

 


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

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

下一篇:CSS3实现的几个小loading效果

评论留言

还没有评论留言,赶紧来抢楼吧~~

Erlo大厅()

* 这里是“Erlo大厅”,在这发言所有人都可以看到。只保留当天信息

  • Erlo.vip2018-10-23 10:18:52Hello、欢迎使用Erlo大厅,这里是个吐槽的地方。
  • 首页 源码分享 新闻资讯 ERLO 搜索
    鼠标试试
    返回顶部