成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

vue axios 簡(jiǎn)單封裝以及思考

phoenixsky / 2977人閱讀

摘要：先安裝的詳細(xì)介紹以及用法就不多說(shuō)了請(qǐng)移步下面是簡(jiǎn)單的封裝一個(gè)，在此說(shuō)明這個(gè)方法呢是不一定需要的，根據(jù)個(gè)人的項(xiàng)目需求吧，也可以直接返回，交給后面另行處理也行?；蛘吒鶕?jù)后端返回的狀態(tài)，在里面進(jìn)行處理也行。

先安裝 axios

npm install axios

axios的詳細(xì)介紹以及用法 就不多說(shuō)了請(qǐng) 移步 github ??? https://github.com/axios/axios

?

下面是簡(jiǎn)單的封裝一個(gè) http.js， 在此說(shuō)明??checkStatus 這個(gè)方法呢 是不一定需要的 ，根據(jù)個(gè)人的項(xiàng)目需求吧，也可以直接返回response，交給后面另行處理也行。

或者根據(jù)后端返回的狀態(tài)，在里面進(jìn)行處理 也行。

"use strict";

import axios from "axios";
import qs from "qs";

//添加請(qǐng)求攔截器
axios.interceptors.request.use(
  config => {
    return config;
  },
  error => {
    return Promise.reject(error);
  }
);

//添加響應(yīng)攔截器
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: "網(wǎng)絡(luò)異常"
      });
    }
  });
}

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 項(xiàng)目中，main.js這個(gè)文件

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 進(jìn)來(lái) 并暴露到全局使用，在任何vue 頁(yè)面中 就不再需要 import http.js了，而直接通過(guò) this.$http.post?this.$http.get 來(lái)使用，在checkStatus中統(tǒng)一異步返回，順便可以處理錯(cuò)誤的情況。

?

個(gè)人思考：

checkStatus方法 返回了一個(gè)?Promise

鏈?zhǔn)浇Y(jié)構(gòu)的話看上面那個(gè)get的方法，this.$http.get(...).then(...).catch(...)，如果then 里面又來(lái)一個(gè) http請(qǐng)求 會(huì)一層包住一層。

如果使用了語(yǔ)法糖 async? await? ，雖然 看起來(lái)好像是簡(jiǎn)單了 不用 一層包住一層 層層嵌套，可是你必須要用到 try?catch，如果出現(xiàn)異常 則直接到catch，不會(huì)再執(zhí)行下面到方法。如果再實(shí)際業(yè)務(wù)中，就算出現(xiàn)了某一個(gè)http請(qǐng)求失敗到情況，不影響下面的邏輯要繼續(xù)跑下去呢，這個(gè)就不適用了。鏈?zhǔn)浇Y(jié)構(gòu)也是 如果catch到異常 也不會(huì)執(zhí)行then 里面到方法了。

所以，是否把返回的Promise，全部都返回的是?resolve，那么 就不會(huì)說(shuō)出現(xiàn)直接到了 catch 里面不執(zhí)行以下的業(yè)務(wù)了邏輯了呢。而且如果使用了語(yǔ)法糖 await 代碼看起來(lái)更加簡(jiǎn)潔 也不需要 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: "網(wǎng)絡(luò)異常"
      });
    }
  });
}

個(gè)人覺得這兩種方案各有優(yōu)劣，實(shí)際應(yīng)用中還是應(yīng)該根據(jù)個(gè)人業(yè)務(wù)需求 業(yè)務(wù)情況而定。

?

代碼已上傳到github：?https://github.com/huangenai/axios-hea?


此隨筆乃本人學(xué)習(xí)工作記錄，如有疑問(wèn)歡迎在下面評(píng)論，轉(zhuǎn)載請(qǐng)標(biāo)明出處。

如果對(duì)您有幫助請(qǐng)動(dòng)動(dòng)鼠標(biāo)右下方給我來(lái)個(gè)贊，您的支持是我最大的動(dòng)力。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/1724.html

相關(guān)文章

  • 當(dāng)大多數(shù)人對(duì)Vue理解到爐火純青的時(shí)候，是不是該思考一下怎么讓vue頁(yè)面騷氣起來(lái)

    寫在前面 當(dāng)大多數(shù)人Vue理解的爐火純青的時(shí)候，你應(yīng)該思考怎么讓vue頁(yè)面騷氣起來(lái)，下面就我個(gè)人在接觸Vue兩年的時(shí)間里，在實(shí)際工作中門戶網(wǎng)站在前端頁(yè)面交互應(yīng)用和技巧，炒幾道小菜給大家分享一哈，我把它封裝成一個(gè)項(xiàng)目vue-portal-webUI（github源碼），不敢說(shuō)是UI，但也是各種常見常遇到的情景吧，看懂代碼需要一些vue、axios、es6、scss基礎(chǔ)、數(shù)據(jù)基本上是mock，功能和場(chǎng)...

    lingdududu 評(píng)論0 收藏0

  • Vue開發(fā)總結(jié) 及 一些最佳實(shí)踐 （已更新）

    摘要：基本開發(fā)環(huán)境創(chuàng)建的項(xiàng)目，作為代碼編寫工具插件推薦插件配置文章目錄項(xiàng)目目錄結(jié)構(gòu)介紹框架選擇處理請(qǐng)求二次封裝項(xiàng)目目錄結(jié)構(gòu)簡(jiǎn)介業(yè)務(wù)相關(guān)靜態(tài)文件全局組件基礎(chǔ)樣式布局樣式及工具引入請(qǐng)求配置路由全局狀態(tài)管理工具文件入口文件主要配置文件頁(yè)面檢查配置測(cè)試 基本開發(fā)環(huán)境 vue-cli3 創(chuàng)建的項(xiàng)目，vscode 作為代碼編寫工具vscode插件推薦：vscode 插件配置 文章目錄 項(xiàng)目目錄結(jié)構(gòu)介紹...

    NotFound 評(píng)論0 收藏0

  • vue封裝axios基本思路

    Axios 是一個(gè)基于 promise 的 HTTP 庫(kù)，可以用在瀏覽器和 node.js 中。在vue項(xiàng)目之中使用axios是一個(gè)非常明智的選擇，因?yàn)関ue官方已經(jīng)宣稱不再維護(hù)vue-resource,并且推薦使用axios. 1 為什么選擇axios？ 使用axios可以統(tǒng)一做請(qǐng)求-響應(yīng)攔截，例如響應(yīng)時(shí)我們將響應(yīng)信息攔截起來(lái)，判斷狀態(tài)碼，從而彈出報(bào)錯(cuò)信息 設(shè)定請(qǐng)求超時(shí),例如3000ms未響應(yīng)...

    microcosm1994 評(píng)論0 收藏0

  • VUE知識(shí)點(diǎn)集錦

    摘要：載入前后在階段，實(shí)例的和都初始化了，但還是掛載之前為虛擬的節(jié)點(diǎn)，還未替換。類似于，不同在于提交的是，而不是直接變更狀態(tài)可以包含任意異步操作。 vue基礎(chǔ) 1、 router 路由與 a 標(biāo)簽的區(qū)別：https://www.jianshu.com/p/34b...2、 VUE雙向綁定的原理： 答：VUE實(shí)現(xiàn)雙向數(shù)據(jù)綁定的原理就是利用了 Object.defineProperty() 這個(gè)...

    Tecode 評(píng)論0 收藏0

  • VUE知識(shí)點(diǎn)集錦

    摘要：載入前后在階段，實(shí)例的和都初始化了，但還是掛載之前為虛擬的節(jié)點(diǎn)，還未替換。類似于，不同在于提交的是，而不是直接變更狀態(tài)可以包含任意異步操作。 vue基礎(chǔ) 1、 router 路由與 a 標(biāo)簽的區(qū)別：https://www.jianshu.com/p/34b...2、 VUE雙向綁定的原理： 答：VUE實(shí)現(xiàn)雙向數(shù)據(jù)綁定的原理就是利用了 Object.defineProperty() 這個(gè)...

    APICloud 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<