Was heißt Axios? Detaillierte Erläuterung der sekundären Kapselung von Axios anhand von Geschäftsszenarien (Beispiel)

Der Inhalt dieses Artikels handelt davon, was Axios ist? Die detaillierte Erklärung (Beispiel) von Axios zur sekundären Kapselung basierend auf Geschäftsszenarien hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen.

axios

axios ist eine Promise-basierte HTTP-Bibliothek, die in Browsern und node.js verwendet werden kann.
Es wird auch häufig in Front-End-Frameworks verwendet. Unabhängig davon, ob es sich um Vue oder React handelt, verwenden viele Projekte Axios als Netzwerkanforderungsbibliothek.
Ich habe Axios in mehreren aktuellen Projekten verwendet und basierend auf Axios einen gemeinsamen Anforderungsdienst basierend auf allgemeinen Geschäftsszenarien gekapselt.

Geschäftsszenario:

1. Globale Anforderungskonfiguration.

2. Versprechen Sie die Kapselung von Get-, Post-, Put-, Lösch- und anderen Anfragen.

3. Globale Anforderungsstatusverwaltung zum Laden von Animationen usw.

4. Routensprung bricht die aktuelle Seitenanfrage ab.

5. Anfragen enthalten Token und Berechtigungsfehler werden einheitlich verwaltet.

Standardkonfiguration

Definieren Sie die globale Standardkonfiguration

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

Benutzerdefinierte Konfiguration (kein häufiges Geschäftsszenario, nur zur Einführung)

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

Priorität: Benutzerdefinierte Konfiguration> Standardkonfiguration

Anforderungs- und Antwort-Interceptor

// 请求列表
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. Alle angeforderten URLs sind im Anforderungs-Interceptor enthalten. Fügen Sie die Anforderungslistenvariable hinzu um sich auf die Stornierung der Anfrage und die Verwaltung des Ladestatus vorzubereiten

2. Sobald die Anfrage startet, können Sie den Animationsladeeffekt aktivieren.

3. Nach der Anmeldung kann der Benutzer das Token im Anforderungsheader zur Berechtigungsüberprüfung tragen und den

Antwort-Interceptor

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 verwenden entsprechende Anfrage aus der Anfrageliste

2. Wenn die Anfrageliste leer ist, enden alle Anfragen und die Ladeanimation endet

3. Die Verarbeitung von Stornierungsanfragen zur Kombination mit anderen Codeanweisungen
5. Da das Projekt-Backend keine Schnittstellenanfragen im RESTful-Stil verwendet, werden alle Anfragen außer 200 als Netzwerkanfragefehler klassifiziert

Versprechen Sie Kapselungs- und Abbruchanfragen

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 cancel token API

2. Speichern Sie die Liste der Anfragen, die abgebrochen werden müssen, und exportieren Sie sie mit

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 Vollständiger Code:

// 引入网络请求库 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}

oben.

Das obige ist der detaillierte Inhalt vonWas heißt Axios? Detaillierte Erläuterung der sekundären Kapselung von Axios anhand von Geschäftsszenarien (Beispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!