vue axios 簡單封裝以及思考

phoenixsky 發布于2019-04-23 13:19 / 2968人閱讀

摘要：先安裝的詳細介紹以及用法就不多說了請移步下面是簡單的封裝一個，在此說明這個方法呢是不一定需要的，根據個人的項目需求吧，也可以直接返回，交給后面另行處理也行。或者根據后端返回的狀態，在里面進行處理也行。

先安裝 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?

此隨筆乃本人學習工作記錄，如有疑問歡迎在下面評論，轉載請標明出處。

如果對您有幫助請動動鼠標右下方給我來個贊，您的支持是我最大的動力。

GPU云服務器云服務器 axios axios cdn fetch和axios的區別換位思考

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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