npm install axios

"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);

    });

  }

};

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

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

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