So verwenden Sie vue-cli zum Einführen und Konfigurieren von Axios

Dieses Mal werde ich Ihnen zeigen, wie Sie mit vue-cli Axios einführen und konfigurieren. Was sind die Vorsichtsmaßnahmen bei der Verwendung von vue-cli zum Einführen und Konfigurieren von Axios? sehen.

1. Installieren Sie Axios mit npm und installieren Sie es im Dateistammverzeichnis. Die Anweisungen lauten wie folgt:

npm install axios --save-dev 

2. Ändern Sie die Prototypenkette und führen Sie Axios ein in main.js

import axios from 'axios' 

Dann schreiben Sie Axios als Prototypattribut von Vue um,

Vue.prototype.$http=axios 

Auf diese Weise kann es Der Befehl $http schließt die Datenanforderung ab um den Link

unten zu öffnen. Lassen Sie mich Ihnen vorstellen, wie Sie Axios mit Vue-Cli konfigurieren.

1.

2.

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) 
    }) 
   }    
}

npm install axios --save3 .

Fügen Sie die axios.ts-Datei im src-Verzeichnis hinzu, Inhalt:

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

4.

Erstellen Sie eine neue vue.d.ts-Datei im Ordner „types“, Inhalt:

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

Auf diese Weise können Sie Axios über this.$axios in jedem Modul verwenden

wo in Axios:

1. build.rootpath.js Inhalt:

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

2. Der Store ist eine Vuex-Datei, daher müssen Sie Vuex im Voraus installieren

Ich glaube Ihnen Nachdem Sie den Fall in diesem Artikel gelesen haben, beherrschen Sie die Methode. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

So verwenden Sie Vux-UI, um die Formularvalidierung anzupassen

So verwenden Sie Routing-Schutzvorrichtungen in Angular Routing

Das obige ist der detaillierte Inhalt vonSo verwenden Sie vue-cli zum Einführen und Konfigurieren von Axios. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!