Utilisez axios pour encapsuler la méthode fetch et appeler-js tutoriel-php.cn

Utilisez axios pour encapsuler la méthode fetch et appeler

亚连

Libérer： 2018-06-07 16:28:03

original

2037 Les gens l'ont consulté

Ci-dessous, je vais partager avec vous un exemple d'encapsulation de la méthode fetch et de son appel basé sur axios. Elle a une bonne valeur de référence et j'espère qu'elle sera utile à tout le monde.

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

//依赖于axios对私有ajax进行修改
import Qs from &#39;qs&#39;
import axios from &#39;axios&#39;
import router from &#39;router/index&#39;
import {errorPrompt, loading, closeLoading} from &#39;util/util&#39;
export const status = {
 SUCCESS: &#39;100&#39;,
 NET_ERR: &#39;101&#39;, // 网络连接异常，请稍候再试
 BIZ_ERR: &#39;103&#39;, // 业务请求异常
 NO_AUTH: &#39;104&#39;
}
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)),
  &#39;Content-Type&#39;: &#39;application/x-www-form-urlencoded&#39;
  },
  transformRequest: [function (data) {
  // Do whatever you want to transform the data
  let ret = &#39;&#39;
  for (let it in data) {
   ret += encodeURIComponent(it) + &#39;=&#39; + encodeURIComponent(data[it]) + &#39;&&#39;
  }
  return ret
  }]
 });
 instance.interceptors.request.use(function (response) {
  // 请求拦截
  loading();
  return response;
 }, function (error) {
  console.log(&#39;error 请求拦截 : &#39;, 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: &#39;/manager/login&#39;})
    } else {
     session.remove("clientUserToken")
     router.push({path: &#39;/client/login&#39;})
    }
    reject(res)
    break
    }
   }
   }
   closeLoading();
   resolve(res);
  }).catch(error => {
   closeLoading();
   errorPrompt(&#39;网络连接错误，请检查您的网络&#39;)
   console.log(&#39;error&#39;, error); // for debug
   reject(error);
  });
 });
}
function commonBizHeader (isManager) {
 let session = require("storejs");
 let params = {}
 params[&#39;ua&#39;] = window.navigator.userAgent.toLowerCase()
 params[&#39;cv&#39;] = &#39;123456&#39;
 params[&#39;ws&#39;] = window.screen.height + &#39;*&#39; + window.screen.width
 params[&#39;token&#39;] = "123456"
 params[&#39;os&#39;] = window.navigator.appCodeName
 if (isManager) {
 params[&#39;token&#39;] = session.get(&#39;managerUserToken&#39;) // 管理 - 用户令牌
 } else {
 params[&#39;token&#39;] = session.get(&#39;clientUserToken&#39;) // 用户 - 用户令牌
 }
 params[&#39;app&#39;] = &#39;kind&#39;
 let UUID = session.get(&#39;pkey&#39;)
 if (!UUID) {
 UUID = getUUID()
 window.localStorage.setItem(&#39;pkey&#39;, 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 = &#39;0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz&#39;.split(&#39;&#39;)
 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()
}

Copier après la connexion

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 &#39;api/fetch&#39;
export const callAuthCode = (userPhone) => {
 return fetch({
 url: &#39;/api/auth/code&#39;,
 method: &#39;post&#39;,
 data: ({
  userPhone: userPhone,
 }),
 })
}

Copier après la connexion

Parce que notre backend nécessite une distinction stricte entre les requêtes get/post, donc l'appel de méthode encapsulé doit contenir la méthode Si le backend. l'a déjà traité, toutes les demandes de publication peuvent être faites, vous pouvez vous référer au site officiel d'axios et modifier toutes les méthodes en .post

Explication sur la méthode fetch : elle encapsule principalement l'interception des demandes et l'interception des réponses. le corps de la requête est converti 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 l'appliquer directement concernant la partie d'en-tête de la requête. une configuration spéciale requise par notre backend et les trois extrémités de l'interface backend Pour le partage, vous devez distinguer où appeler

Ce qui précède est ce que j'ai compilé pour tout le monde, j'espère que cela sera utile à tout le monde. l'avenir.

Articles associés :

Concept et utilisation du mode commande en JS (tutoriel détaillé)

Comment implémenter des rappels à l'aide de Promise dans WeChat une applet ?

Échec de l'installation d'Electron à l'aide de npm

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!