Explication détaillée de l'appel de récupération de l'encapsulation axios

Cette fois, je vais vous apporter une explication détaillée de l'appel de récupération du package axios. Quelles sont les précautions pour la récupération du package axios. Voici un cas pratique, jetons un coup d'œil.

Pour une utilisation de base d'axios, veuillez consulter le site officiel d'axios

//依赖于axios对私有ajax进行修改
import Qs from 'qs'
import axios from 'axios'
import router from 'router/index'
import {errorPrompt, loading, closeLoading} from 'util/util'
export const status = {
 SUCCESS: '100',
 NET_ERR: '101', // 网络连接异常，请稍候再试
 BIZ_ERR: '103', // 业务请求异常
 NO_AUTH: '104'
}
export function fetch(options) {
 return new Promise((resolve, reject) => {
 let instance = axios.create({
  baseURL: process.env.BASE_API,
  timeout: 2000,
  headers: {
  // "tracecode": window.encodeURIComponent(JSON.stringify({"ua":"","cv":"20161230","token":"3dwo0onUUsPKVJcP8tk","os":"windows10","app":"kind","ws":"1*1","pkey":"f8caf7d7-a5d4-4710-b06f-28a922b6a467"}))
  "tracecode": commonBizHeader(isManager(options)),
  'Content-Type': 'application/x-www-form-urlencoded'
  },
  transformRequest: [function (data) {
  // Do whatever you want to transform the data
  let ret = ''
  for (let it in data) {
   ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
  }
  return ret
  }]
 });
 instance.interceptors.request.use(function (response) {
  // 请求拦截
  loading();
  return response;
 }, function (error) {
  console.log('error 请求拦截 : ', error)
  return Promise.reject(error);
 });
 instance(options)
  .then(response => {
   const res = response.data;
   if (res.errorCode != status.SUCCESS) {
   switch (res.errorCode) {
    case status.NET_ERR: {
    errorPrompt(res.errorMsg)
    reject(res)
    break;
    }
    case status.BIZ_ERR: {
    errorPrompt(res.errorMsg)
    reject(res)
    break;
    }
    case status.NO_AUTH: {
    errorPrompt(res.errorMsg)
    let session = require("storejs")
    if (isManager(options)) { // 管理端
     session.remove("managerUserToken")
     router.push({path: '/manager/login'})
    } else {
     session.remove("clientUserToken")
     router.push({path: '/client/login'})
    }
    reject(res)
    break
    }
   }
   }
   closeLoading();
   resolve(res);
  }).catch(error => {
   closeLoading();
   errorPrompt('网络连接错误，请检查您的网络')
   console.log('error', error); // for debug
   reject(error);
  });
 });
}
function commonBizHeader (isManager) {
 let session = require("storejs");
 let params = {}
 params['ua'] = window.navigator.userAgent.toLowerCase()
 params['cv'] = '123456'
 params['ws'] = window.screen.height + '*' + window.screen.width
 params['token'] = "123456"
 params['os'] = window.navigator.appCodeName
 if (isManager) {
 params['token'] = session.get('managerUserToken') // 管理 - 用户令牌
 } else {
 params['token'] = session.get('clientUserToken') // 用户 - 用户令牌
 }
 params['app'] = 'kind'
 let UUID = session.get('pkey')
 if (!UUID) {
 UUID = getUUID()
 window.localStorage.setItem('pkey', UUID)
 }
 return encodeURIComponent(JSON.stringify(params))
}
function isManager(options) {
 return options && options.url && options.url.indexOf("/api/worker") != -1
}
/**
 * 获取UUID
 * @returns {string}
 */
export function getUUID() {
 let len = 32 // 32长度
 let radix = 16 // 16进制
 let chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'.split('')
 let uuid = []
 let i
 radix = radix || chars.length
 if (len) {
 for (i = 0; i < len; i++) {
  uuid[i] = chars[0 | Math.random() * radix]
 }
 } else {
 var r
 uuid[8] = uuid[13] = uuid[18] = uuid[23] = &#39;-&#39;
 uuid[14] = &#39;4&#39;
 for (i = 0; i < 36; i++) {
  if (!uuid[i]) {
  r = 0 | Math.random() * 16
  uuid[i] = chars[(i === 19) ? (r & 0x3) | 0x8 : r]
  }
 }
 }
 return uuid.join(&#39;&#39;).toLowerCase()
}

C'est dans le projet vue : la méthode d'appel dans le api est la suivante (réagissez, je viens de commencer à apprendre et je fais toujours des démos simples)

import {fetch} from 'api/fetch'
export const callAuthCode = (userPhone) => {
 return fetch({
 url: '/api/auth/code',
 method: 'post',
 data: ({
  userPhone: userPhone,
 }),
 })
}

Parce que notre backend nécessite une distinction stricte entre get/post request, donc l'appel de méthode encapsulé doit contain méthode, Si l'arrière-plan a été traité et que toutes les demandes de publication peuvent être faites, vous pouvez vous référer au site officiel d'axios et changer toutes les méthodes en .post

Explication sur la méthode fetch : Elle encapsule principalement l'interception des demandes, interception de réponse et corps de requête par défaut. Convertissez du format json au format de formulaire Bien sûr, ceux-ci peuvent être trouvés sur le site officiel d'axios, mais ils sont simplement collectés

Veuillez ne pas appliquer directement l'en-tête de la requête. Il s'agit d'une configuration spéciale requise par notre backend. Oui, les trois extrémités de l'interface backend sont partagées. Vous devez distinguer où appeler

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour un contenu plus passionnant, veuillez prêter attention au site Web php chinois et à d'autres articles connexes !

Lecture recommandée :

JS calcule automatiquement les coûts d'hébergement à l'hôtel

L'effet de l'affichage du cercle de chargement avant le chargement de l'image

Comment utiliser le sélecteur de date

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!