Étapes de configuration pour Axios (tutoriel détaillé)

Cet article partage principalement avec vous les étapes de configuration d'Axios dynamiques. L'article présente l'exemple de code de manière très détaillée, vous pouvez facilement réaliser la configuration d'Axios dynamiques. 🎜>

Préface

Quand j'écrivais des projets Vue dans le passé, j'utilisais vue-resource comme bibliothèque ajax de projet, surtout un certain jour dans Novembre. Une mise à jour sur Weibo indique que la bibliothèque ajax devrait être universelle, et que le support technique de vue-resource a été abandonné et qu'axios est recommandé.

Il est recommandé d'utiliser l'outil Vue-cli pour créer et gérer des projets Même si vous ne le connaissez pas au début, vous en connaîtrez les secrets après l'avoir utilisé. Il y a quelque temps, le plug-in de demande de données officiellement recommandé était Vue-resource, mais maintenant il a changé et est devenu Axios. Vous n'avez pas besoin de savoir pourquoi il a changé. De toute façon, celui-ci est préférable à utiliser celui-là. alors utilisez-le. Voici quelques encapsulations d'axios. Je demande un peu d'expérience, et j'espère que vous pourrez me dire si je me trompe !

La méthode est la suivante

1 Créez le fichier une fois le projet Vue initialisé, créez un dossier d'outils utilitaires dans le src. répertoire, généralement utilisé pour stocker certaines méthodes de fonction encapsulées. Créons maintenant un fichier http.js dans le répertoire du fichier util pour encapsuler la méthode axios.

2. Téléchargez directement le code (version régulière), il y a des commentaires détaillés dans le code

import axios from 'axios' //引用axios
import {Promise} from 'es6-promise' //引入Promise
// axios 配置
axios.defaults.timeout = 5000; //设置超时时间
axios.defaults.baseURL = 'http://localhost:4000/api/v1/'; //这是调用数据接口
// http request 拦截器（所有发送的请求都要从这儿过一次），通过这个，我们就可以把token传到后台，我这里是使用sessionStorage来存储token等权限信息和用户信息，若要使用cookie可以自己封装一个函数并import便可使用
axios.interceptors.request.use(
 config => {
  const token = sessionStorage.getItem("token"); //获取存储在本地的token
  config.data = JSON.stringify(config.data);
  config.headers = {
   'Content-Type':'application/json' //设置跨域头部,虽然很多浏览器默认都是使用json传数据，但咱要考虑IE浏览器。
  };
  if (token) {
   config.headers.Authorization = "Token " + token; //携带权限参数
  }
  return config;
 },
 err => {
  return Promise.reject(err);
 }
);


// http response 拦截器（所有接收到的请求都要从这儿过一次）
axios.interceptors.response.use(
 response => {
//response.status===401是我和后台约定的权限丢失或者权限不够返回的状态码，这个可以自己和后台约定，约定返回某个自定义字段也是可以的
  if(response.status == 401) {
   router.push({ //push后面是一个参数对象，可以携带很多参数，具体可以去vue-router上查看，例如query字段表示携带的参数
    path: '/login' 
   })
  }
  return response;
 },
 error => {
  return Promise.reject(error.response.data)
 });

export default axios;

/**
 * fetch 请求方法
 * @param url
 * @param params
 * @returns {Promise}
 */
export function fetch(url, params = {}) {
 return new Promise((resolve, reject) => {
  axios.get(url, {
   params: params
  })
  .then(response => {
   resolve(response.data);
  })
  .catch(err => {
   reject(err)
  })
 })
}

/**
 * post 请求方法
 * @param url
 * @param data
 * @returns {Promise}
 */
export function post(url, data = {}) {
 return new Promise((resolve, reject) => {
  axios.post(url, data)
   .then(response => {
    resolve(response.data);
   }, err => {
    reject(err);
   })
 })
}

/**
 * patch 方法封装
 * @param url
 * @param data
 * @returns {Promise}
 */
export function patch(url, data = {}) {
 return new Promise((resolve, reject) => {
  axios.patch(url, data)
   .then(response => {
    resolve(response.data);
   }, err => {
    reject(err);
   })
 })
}

/**
 * put 方法封装
 * @param url
 * @param data
 * @returns {Promise}
 */
export function put(url, data = {}) {
 return new Promise((resolve, reject) => {
  axios.put(url, data)
   .then(response => {
    resolve(response.data);
   }, err => {
    reject(err);
   })
 })
}

3. (version dynamique), l'intercepteur axios n'est pas nécessaire, pas pour tous les projets Les deux sont requis et il y a plusieurs Content-Type et Authorization dans les en-têtes. Dans ce cas, une autre méthode doit être utilisée.

util/http.js

import axios from 'axios' //引用axios
import {Promise} from 'es6-promise' //引入Promise
// axios 配置和拦截器都不用了，这里我使用了一个动态配置数据请求地址，在App.vue中，代码在下面，这个也不是必须的。
//^_^下面都设置一个默认的头部，使用的时候可以传入数据覆盖^_^,例如使用fetch(GET)方法时，没有请求数据，但是请求头有变化，则应写成 fetch("地址", {}, {"这里写头部的内容"}) 记住没数据用一个空对象占位置
/**
 * fetch 请求方法
 * @param url
 * @param params
 * @returns {Promise}
 */
export function fetch(url, params = {}, headers = {
 'Content-Type': 'application/json', //设置跨域头部
 "Authorization": 'JWT ' + sessionStorage.getItem("authToken")
}) {

 return new Promise((resolve, reject) => {
  axios.get(url, {
   params: params,
   headers: headers
  })
  .then(response => {
   resolve(response.data);
  })
  .catch(err => {
   reject(err.response)
  })
 })
}

/**
 * post 请求方法
 * @param url
 * @param data
 * @returns {Promise}
 */
export function post(url, data = {}, config = {
 "headers": {
  'Content-Type': 'application/json', //设置跨域头部
  "Authorization": 'JWT ' + sessionStorage.getItem("authToken")
 }
}) {
 return new Promise((resolve, reject) => {
  axios.post(url, data, config)
   .then(response => {
    resolve(response.data);
   }, err => {
    reject(err.response);
   })
 })
}

/**
 * patch 方法封装
 * @param url
 * @param data
 * @returns {Promise}
 */
export function patch(url, data = {}, config = {
 "headers": {
  'Content-Type': 'application/json', //设置跨域头部
  "Authorization": 'JWT ' + sessionStorage.getItem("authToken")
 }
}) {
 return new Promise((resolve, reject) => {
  axios.patch(url, data, config)
   .then(response => {
    resolve(response.data);
   }, err => {
    reject(err.response);
   })
 })
}

/**
 * put 方法封装
 * @param url
 * @param data
 * @returns {Promise}
 */
export function put(url, data = {}, config = {
 "headers": {
  'Content-Type': 'application/json', //设置跨域头部
  "Authorization": 'JWT ' + sessionStorage.getItem("authToken")
 }
}) {
 return new Promise((resolve, reject) => {
  axios.put(url, data, config)
   .then(response => {
    resolve(response.data);
   }, err => {
    reject(err.response);
   })
 })
}

App.vue (il s'agit du fichier d'entrée du programme dans le répertoire src)

<template>
 <p id="app">
 <router-view/>
 </p>
</template>

<script>
import axios from &#39;axios&#39;;
let protocol = window.location.protocol; //协议
let host = window.location.host; //主机
let reg = /^localhost+/;
if(reg.test(host)) {
 //若本地项目调试使用
 axios.defaults.baseURL = &#39;http://10.0.xx.xxx:xxxx/api/&#39;;
} else {
 //动态请求地址
 axios.defaults.baseURL = protocol + "//" + host + "/api/";
}
axios.defaults.timeout = 30000;
export default {
 name: &#39;app&#39;,
 axios //这里记得导出，若请求地址永久固定一个，则就按照`普通版`配置一个baserURL就可以了
}
</script>

<style lang="scss"> //这里我使用的是scss
@import &#39;~@/style/style&#39;
</style>

Résumé

FAQ

Lors de l'utilisation de la version dynamique, pourquoi est-elle appelée dynamique Parce que l'adresse d'accès et l'adresse de demande sont la même adresse ? Le numéro de port peut être utilisé. Par exemple, si j'accède au projet via http://www.cmgos.com (port par défaut 80), alors mon baseURL deviendra automatiquement http:www.cmgos.com:80/api/. . La raison en est que lorsque le projet est migré ou que http est remplacé par https un jour, vous n'avez pas besoin de changer l'adresse de la demande, le programme se terminera automatiquement

L'adresse de la demande de données est-elle configurée correctement ? Si vous configurez baseURL, lorsque vous utilisez votre fonction encapsulée, il vous suffit de transmettre l'adresse de requête basée sur baseURL. Par exemple, si vous transmettez login/, l'adresse de requête deviendra automatiquement http:www.cmgos.com:80. /api/login/ , s'il n'est pas configuré, vous pouvez transmettre directement l'adresse complète de la requête

Notes

Lors de l'utilisation de la version dynamique, puisqu'aucun intercepteur n'est utilisé, la fonction encapsulée ci-dessous doit donc être écrite sous la forme

pour obtenir les données renvoyées lors du renvoi d'une erreur, mais j'ai écrit err.response.data car de cette façon, vous pouvez obtenir le code d'état (de statut) et d'autres informations . Si vous n'avez pas besoin de juger les données renvoyées. Pour le code d'état, remplacez-le par err.responseerr.response.data 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 :

Comment utiliser le plug-in de progression du chargement avec Pace.js et NProgress.js (tutoriel détaillé)

Dans l'applet WeChat À propos du cycle de vie de l'application (tutoriel détaillé)

Dans jQuery à propos de l'utilisation du plug-in de progression du chargement de NProgress.js

Dans l'applet WeChat Comment utiliser le composant switch

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!