vueプロジェクトパッケージaxiosおよび呼び出しapi自動グローバルloading、エラープロンプト

前言
プロジェクトではloadingが使用され、一般的にjsで変数を変更したり、serviceの方法を呼び出したりします.例えば、Element Uiでは、この2つの方法のloadingが提供され、このようにして優れた拡張性があります.BUT、もしあなたがバックグラウンド管理プロジェクトをするならば、apiがこのようにコードを繰り返しなければなりません.emmm...私は受け入れられません.私の怠け者がどのようにvueプロジェクトの中で、自動グローバルのloadingをaxiosにパッケージしているかを見てみましょう.
また、私は多くの友达がまだこのようなコードを書いているのを見ています.

 /**
  *       ，           code、data、message
  */
api.http('url' , data).then(res => {
    if (res.code === 200) {
        //        
    } else {
        //     ，        ，     alert，          ，   ！
        alert(res.message)
    }
})

準備作業

相対標準のvueプロジェクトは、vue-cli足場で構築することを選択することができる.

はaxiosを導入し、理論的には直接npm install axiosである.

プロジェクトのsrcディレクトリの下にutilsディレクトリを作成することをお勧めします.filter、共通の方法などをファイルに分けて書くことができます.

utilsディレクトリの下にhttp.jsを作成します(どのように命名してもいいですが、面白いならいいです.勝手に~)

OK、これからhttp.jsにaxiosを封入する.
パッケージaxios
ここはあまり話さないで,直接コードをつけた.

import axios from 'axios'
import store from '../store' //    loading   store
import { getToken } from '@/utils/auth' //      ，      tooken 

//   axios  
const service = axios.create({
  // api base_url，       ，       baseURL
  // baseURL: process.env.BASE_API, 
  timeout: 15000, //       
  // headers          ，    request      
  // headers: {'X-Custom-Header': 'foobar'}
})

// request   
service.interceptors.request.use(config => {

  // !!!        loading    !!!   
  store.dispatch('SetLoading', true)
  
  //    token header
  getToken() && (config.headers['token'] = token)
  
  //              header
  config.headers['deviceType'] = 'school_admin_web' 
  return config
},
error => {
  const { response } = error
  //                 ，       

  Promise.reject(error)
})

// respone   
service.interceptors.response.use(
  response => {
    // !!!    loading !!! 
    store.dispatch('SetLoading', false)
    
    const res = response.data
    if (res.code !== 200) {
      //                ，                else,       
      alert(res.message)
      //     alert 
    }
    return response.data
  },
  error => {
    // !!!    loading !!! 
    store.dispatch('SetLoading', false)
    
    const { response } = error
    //                 ，       
    
    return Promise.reject(error)
  }
)

export default service

はい、実はグローバルなエラーのヒントは、上のコードの中で直接的な体現があって、ここではあまり話しません.そのグローバルなloadingの話は、ここではstoreのSetLoadingを呼び出しました.
まだstoreを使ったことがない場合は、自分でドキュメントを勉強してください.ここではstoreの詳細な説明はしません.
storeを使用してloadingステータスを制御する
ここでは、storeに慣れてstoreのモジュール化を使用していると仮定します(もちろん、モジュール化しなくても構いません.あなた自身を見てください).storeディレクトリの下にapp moduleがあると仮定すると、app.jsに対応します.はい、上コード:

const app = {
  state: {
    requestLoading: 0,
  },
  mutations: {
    SET_LOADING: (state, boolean) => {
      boolean ? ++state.requestLoading : --state.requestLoading
    },
  },
  actions: {
    SetLoading ({ commit }, boolean) {
      commit('SET_LOADING', boolean)
    },
  },
}

export default app

axiosのパッケージコードと組み合わせて、axiosのrequestブロッカーの中で、私はstore SetLoadingを呼び出して、requestLoadingの数値を変えて、それを1に加算しました.responseブロッカーでは、store SetLoadingを呼び出し、requestLoadingの数値を1から減らすように変更しました.その全体的な原理は,ごみ回収メカニズムに類似しており,複数のリクエストが同時に発生した場合,すべてのリクエストが結果を返すとloading効果が消失するという利点がある.
では、現在焦点はstore下のappモジュールのrequestLoading状態にあるだけで、loadingの効果を判断すればよい.
では、残りのコードは、ここではあまり言いませんが、
たいてい、レイアウトレイヤでシャドウレイヤのloadingを位置決めし、requestLoadingの状態で表示の非表示を判断します(このように).

import { mapGetters } from <span class="hljs-string">'vuex'</span>

<span class="hljs-built_in">export</span> default {
  name: <span class="hljs-string">'AppMain'</span>,
  computed: {
    ...mapGetters([
      <span class="hljs-string">'requestLoading'</span>,
    ]),
  },
}

// .request-loading-show          ，          。

最終使用
ここでは言うまでもなく、第2部をカプセル化したaxios importを使用すればOKです.ここでは、srcの下にapiディレクトリを作成し、モジュールがすべてのapiを定義することをお勧めします.例えば、

import http from '@/utils/http'

export default {
  add (data) {
    return http({ url: '...', data: data, method: 'post' })
  },
}
//             ...

まとめ
以上の操作により、リクエスト期間中にloading効果が自動的に表示される2つのメリットがあります.エラーが発生した場合、グローバルにヒントが表示されます.
怠け者、すなわち行為が怠け者で、思考が怠け者ではない.
怠け者の行為こそ、思考を推進して怠け者を達成することができる...
間違って書いてあるところがあれば、どうぞ~
もっと良いアドバイスがあれば、伝言を歓迎します.