vue中axios的封裝

先安裝 axios

npm install axios

axios的詳細介紹以及用法 就很少說了請 移步 github ➡️  https://github.com/axios/axios

 

下面是簡單的封裝一個 http.js， 在此說明  checkStatus 這個方法呢 是不必定須要的 ，根據我的的項目需求吧，也能夠直接返回response，交給後面另行處理也行。

或者根據後端返回的狀態，在裏面進行處理 也行。

"use strict";

import axios from "axios";
 

//添加請求攔截器
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: "網絡異常"
      });
    }
  });
}

我的以爲這兩種方案各有優劣，實際應用中仍是應該根據我的業務需求 業務狀況而定。

 

引自 https://www.cnblogs.com/huangenai/p/9760039.html