Explication détaillée des étapes pour introduire vue-cli et configurer axios

Cette fois, je vais vous donner une explication détaillée des étapes pour introduire vue-cli et configurer axios Quelles sont les précautions pour introduire vue-cli et configurer axios. Ce qui suit est un cas pratique, jetons un coup d'oeil.

1. Installez axios avec npm, installez-le dans le répertoire racine du fichier, les instructions sont les suivantes

npm install axios --save-dev 

2. Modifiez la chaîne de prototypes et introduisez axios. dans main.js

import axios from 'axios' 

Puis réécrivez axios comme attribut prototype de Vue,

Vue.prototype.$http=axios 

De cette façon, il peut être appelé dans les méthodes de chaque composant. La commande $http complète la demande de données

3. Utilisation dans le composant

methods: { 
   get(){ 
    this.$http({ 
     method:'get', 
     url:'/url', 
     data:{} 
    }).then(function(res){ 
     console.log(res) 
    }).catch(function(err){ 
     console.log(err) 
    }) 
     
    this.$http.get('/url').then(function(res){ 
     console.log(res) 
    }).catch(function(err){ 
     console.log(err) 
    }) 
   }    
}

Veuillez vous référer au document suivant pour la configuration d'axios, cliquez pour ouvrir le lien

Laissez-moi vous présenter comment configurer axios avec vue-cli

1.

npm install axios --save

2.

npm install @type/axios --save-dev(使用ts编写的需要此声明文件，升级的axios好像不需要了，已经自带)

3.

Ajoutez le fichier axios.ts dans le répertoire src, contenu :

import axios from 'axios'
import {Notification} from 'element-ui'
import store from './store/index'
import buildconf from '../config/build.rootpath.js'
axios.defaults.withCredentials = true;
axios.defaults.baseURL = buildconf.serverUrl
// axios.defaults.baseURL = 'http://gsblackwidow.chinacloudsites.cn/'
axios.interceptors.request.use(function(config) {
 // document.getElementById('g-loader').style.display = 'flex'
 store.commit('requestModify', 1)
 return config;
}, function(error){
 return Promise.reject(error)
})
axios.interceptors.response.use(function(response){
 store.commit('requestModify', -1)
 // document.getElementById('g-loader').style.display = 'none' 
 return response.data;
}, function(error){
 store.commit('requestModify', -1) 
 // document.getElementById('g-loader').style.display = 'none'  
 if(error.response.status === 401){
  Notification({
   title: '权限无效',
   message: '您的用户信息已经失效, 请重新登录',
   type: 'warning',
   offset: 48
  });
  window.location.href = '/#/login'
 }else{
  Notification({
   title: '请求错误',
   message: `${error.response.status} \n ${error.config.url}`,
   type: 'error',
   offset: 48,
  })
 }
 return Promise.reject(error)
})
export default axios

4.

Créez une nouvelle vue.d.ts dans le dossier types Fichier, contenu :

import {AxiosStatic, AxiosInstance } from 'axios'
declare module 'vue/types/vue' {
 interface Vue {
  $axios: AxiosStatic;
 }
}

De cette façon, axios peut être utilisé dans chaque module via this.$axios

Parmi eux, axios :

1. Contenu build.rootpath .js :

var path = require('path')
var rootpath = path.resolve(dirname, '../dist')
module.exports = rootpath

2 Le magasin est un fichier vuex, vous devez donc installer vuex dans. avance

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour un contenu plus passionnant, veuillez faire attention à php Chinois Autres articles connexes en ligne !

Lecture recommandée :

Résumé des algorithmes courants tels que l'accumulation, l'itération, l'épuisement, la récursivité JS, etc.

Analyse du code de configuration de React Family Bucket Environment

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!