Comment utiliser vue-cli pour introduire et configurer axios

Cette fois, je vais vous montrer comment utiliser vue-cli pour introduire et configurer axios. Quelles sont les précautions concernant l'utilisation de vue-cli pour introduire et configurer axios. Voici des cas pratiques, prenons un. regarder.

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 :

Comment utiliser vux-ui pour personnaliser la validation de formulaire

Comment utiliser les gardes de routage dans Angular routage

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!