アクシオスとは何ですか？ビジネスシナリオに基づいたaxiosの2次カプセル化の詳細説明（例）

この記事では、axios とは何ですか? Axios のビジネスシナリオに基づいた二次カプセル化の詳細な説明 (例) は、必要な友人に参考にしていただけると幸いです。

axios

axios は、ブラウザーと Node.js で使用できる Promise ベースの HTTP ライブラリです。
vue であろうと React であろうと、フロントエンド フレームワークでも広く使用されており、ネットワーク リクエスト ライブラリとして axios を使用するプロジェクトが数多くあります。
私は最近のいくつかのプロジェクトで axios を使用しており、axios に基づいて、一般的なビジネス シナリオに基づいた一般的なリクエスト サービスをカプセル化しました。

ビジネス シナリオ:

1. グローバル リクエスト構成。

2. get、post、put、delete およびその他のリクエストのカプセル化を約束します。

3. アニメーション読み込みなどのグローバルリクエストステータス管理。

4. ルート ジャンプにより、現在のページ リクエストがキャンセルされます。

5. リクエストにはトークンが含まれており、権限エラーは均一に管理されます。

デフォルト構成

グローバルなデフォルト構成を定義します

axios.defaults.timeout = 10000 //超时取消请求
axios.defaults.headers.post['Content-Type'] = 'application/json;charset=UTF-8'
axios.defaults.baseURL = process.env.BASE_URL //挂载在process下的环境常量，

カスタム構成 (一般的なビジネス シナリオではなく、導入のみを目的としています)

// 创建实例时设置配置的默认值
var instance = axios.create({
  baseURL: 'https://api.another.com'
});
// 在实例已创建后修改默认值
instance.defaults.headers.common['Authorization'] = AUTH_TOKEN;

優先度: カスタム構成> デフォルト構成

リクエストとレスポンス インターセプター

リクエスト インターセプター

// 请求列表
const requestList = []
axios.interceptors.request.use((config) => {
  //1.将当前请求的URL添加进请求列表数组
  requestList.push(config.url)
  //2.请求开始，改变loading状态供加载动画使用
  store.dispatch('changeGlobalState', {loading: true})
  //3.从store中获取token并添加到请求头供后端作权限校验
  const token = store.getters.userInfo.token
  if (token) {
    config.headers.token = token
  }
  return config
}, function (error) {
  return Promise.reject(error)
})

1. 要求されたすべての URL がリクエスト インターセプターに含まれます。準備するリクエスト リスト変数を追加します。リクエストのキャンセルとロード状態の管理用##2. リクエストが開始されたら、アニメーションのロード効果をオンにできます。
3. ログイン後、ユーザーはアクセス許可を検証するためにリクエスト ヘッダーにトークンを含めることができ、応答インターセプター

axios.interceptors.response.use(function (response) {
  // 1.将当前请求中请求列表中删除
  requestList.splice(requestList.findIndex(item => item === response.config.url), 1)
  // 2.当请求列表为空时，更改loading状态
  if (requestList.length === 0) {
    store.dispatch('changeGlobalState', {loading: false})
  }
  // 3.统一处理权限认证错误管理
  if (response.data.code === 900401) {
    window.ELEMENT.Message.error('认证失效，请重新登录！', 1000)
    router.push('/login')
  }
  return response
}, function (error) {
  // 4.处理取消请求
  if (axios.isCancel(error)) {
    requestList.length = 0
    store.dispatch('changeGlobalState', {loading: false})
    throw new axios.Cancel('cancel request')
  } else {
    // 5.处理网络请求失败
    window.ELEMENT.Message.error('网络请求失败', 1000)
  }
  return Promise.reject(error)
})

1 を使用できます。応答が返された後、対応するインターセプターを削除します。 ＃＃２．リクエストリストが空の場合、つまり全てのリクエストが終了し、ローディングアニメーションが終了する場合＃＃３．許可認証エラー報告は一律にインターセプトされて処理される。＃＃４．キャンセル リクエストは他のコード命令と組み合わせる必要があります##5。プロジェクト バックエンドは RESTful スタイルのインターフェイス リクエストを使用しないため、200 以外のすべてのリクエストはネットワーク リクエストの失敗として分類されます

#プロミス カプセル化およびキャンセル リクエスト

const CancelToken = axios.CancelToken
//cancel token列表
let sources = []
const request = function (url, params, config, method) {
  return new Promise((resolve, reject) => {
    axios[method](url, params, Object.assign({}, config, {
    //1.通过将执行程序函数传递给CancelToken构造函数来创建cancel token
      cancelToken: new CancelToken(function executor (c) {
      //2.将cancel token存入列表
        sources.push(c)
      })
    })).then(response => {
      resolve(response.data)
    }, err => {
      if (err.Cancel) {
        console.log(err)
      } else {
        reject(err)
      }
    }).catch(err => {
      reject(err)
    })
  })
}

const post = (url, params, config = {}) => {
  return request(url, params, config, 'post')
}

const get = (url, params, config = {}) => {
  return request(url, params, config, 'get')
}
//3.导出cancel token列表供全局路由守卫使用
export {sources, post, get}

1.axios キャンセル トークン API
2。キャンセルする必要があるリクエストのリストを保存し、
3.router.js

...
import { sources } from '../service/request'
...
router.beforeEach((to, from, next) => {
  document.title = to.meta.title || to.name
    //路由发生变化时取消当前页面网络请求
  sources.forEach(item => {
    item()
  })
  sources.length = 0
  next()
})

を使用してナビゲーション ガードにエクスポートします。 request.js の完全なコード: 上記の

// 引入网络请求库 https://github.com/axios/axios

import axios from 'axios'
import store from '../store'
import router from '../router'

// axios.defaults.timeout = 10000
const requestList = []

axios.defaults.headers.post['Content-Type'] = 'application/json;charset=UTF-8'

axios.defaults.baseURL = process.env.BASE_URL
// 自定义拦截器
axios.interceptors.request.use((config) => {
  requestList.push(config.url)
  store.dispatch('changeGlobalState', {loading: true})
  const token = store.getters.userInfo.token
  if (token) {
    config.headers.token = token
  }
  return config
}, function (error) {
  return Promise.reject(error)
})

axios.interceptors.response.use(function (response) {
  requestList.splice(requestList.findIndex(item => item === response.config.url), 1)
  if (requestList.length === 0) {
    store.dispatch('changeGlobalState', {loading: false})
  }
  if (response.data.code === 900401) {
    window.$toast.error('认证失效，请重新登录！', 1000)
    router.push('/login')
  }
  return response
}, function (error) {
  requestList.length = 0
  store.dispatch('changeGlobalState', {loading: false})
  if (axios.isCancel(error)) {
    throw new axios.Cancel('cancel request')
  } else {
    window.$toast.error('网络请求失败！', 1000)
  }
  return Promise.reject(error)
})

const CancelToken = axios.CancelToken
let sources = []

const request = function (url, params, config, method) {
  return new Promise((resolve, reject) => {
    axios[method](url, params, Object.assign(config, {
      cancelToken: new CancelToken(function executor (c) {
        sources.push(c)
      })
    })).then(response => {
      resolve(response.data)
    }, err => {
      reject(err)
    }).catch(err => {
      reject(err)
    })
  })
}

const post = (url, params, config = {}) => {
  return request(url, params, config, 'post')
}

const get = (url, params, config = {}) => {
  return request(url, params, config, 'get')
}

export {sources, post, get}

。

以上がアクシオスとは何ですか？ビジネスシナリオに基づいたaxiosの2次カプセル化の詳細説明（例）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。