Qu'est-ce qu'Axios ? Explication détaillée de l'encapsulation secondaire d'axios basée sur des scénarios commerciaux (exemple)

Cet article vous apporte qu'est-ce qu'axios ? L'explication détaillée (exemple) d'Axios de l'encapsulation secondaire basée sur des scénarios commerciaux a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'elle vous sera utile.

axios

axios est une bibliothèque HTTP basée sur des promesses qui peut être utilisée dans les navigateurs et node.js.
Il est également largement utilisé dans les frameworks front-end. Qu'il s'agisse de vue ou de réaction, de nombreux projets utilisent axios comme bibliothèque de requêtes réseau.
J'ai utilisé axios dans plusieurs projets récents, et basé sur axios, j'ai encapsulé un service de requête commun basé sur des scénarios commerciaux courants.

Scénario métier :

1. Configuration de la demande globale.

2. Promesse d'encapsulation des requêtes get, post, put, delete et autres.

3. Gestion globale des statuts des requêtes pour le chargement des animations, etc.

4. Le saut d'itinéraire annule la demande de page en cours.

5. Les requêtes comportent des jetons et les erreurs d'autorisation sont gérées de manière uniforme.

Configuration par défaut

Définir la configuration globale par défaut

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

Configuration personnalisée (pas un scénario commercial courant, juste pour introduction)

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

Priorité : configuration personnalisée> Configuration par défaut

Intercepteur de requête et de réponse

Intercepteur de requête

// 请求列表
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. variable de liste pour préparer l'annulation de la demande et la gestion de l'état de chargement
2. Une fois la demande lancée, vous pouvez activer l'effet de chargement de l'animation.
3. Après s'être connecté, l'utilisateur peut transporter le jeton dans l'en-tête de la demande pour la vérification de l'autorisation et utiliser l'intercepteur de réponse

1. la requête correspondante est supprimée de la liste des requêtes Supprimer dans

2. Lorsque la liste des requêtes est vide, toutes les requêtes se terminent et l'animation de chargement se termine

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)
})

3. Les erreurs d'authentification d'autorisation sont interceptées et traitées de manière unifiée

4. Le traitement des demandes d'annulation doit être combiné avec d'autres instructions de code
5. Étant donné que le backend du projet n'utilise pas de requêtes d'interface de style RESTful, toutes les requêtes autres que 200 sont classées comme des échecs de requêtes réseau

promesse demandes d'encapsulation et d'annulation

1.axios annule l'API du jeton

2 Enregistrez la liste des demandes qui doivent être annulées et exportez-la vers le garde de navigation pour utilisation

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}

3.router.js.

code complet request.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()
})

ci-dessus.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!