Grundlegende Einführung in die Axios-Verpackung in Vue (mit Code)

Dieser Artikel bietet Ihnen eine grundlegende Einführung in die Axios-Verpackung in Vue (mit Code). Ich hoffe, dass er für Freunde hilfreich ist.

Axios ist eine Promise-basierte HTTP-Bibliothek, die in Browsern und node.js verwendet werden kann. Die Verwendung von Axios in einem Vue-Projekt ist eine sehr kluge Wahl, da Vue-Beamte angekündigt haben, dass sie die Vue-Ressource nicht mehr pflegen und die Verwendung von Axios empfehlen.

1 Warum Axios wählen?

1. Mit Axios können Sie ein einheitliches Abfangen von Anfragen und Antworten durchführen. Wenn wir beispielsweise antworten, fangen wir die Antwortinformationen ab, ermitteln den Statuscode und zeigen dann die Fehlermeldung an

2. Legen Sie das Anfrage-Timeout fest, z. B. stoppen Sie die Anfrage, wenn 3000 ms lang keine Antwort erfolgt

3. Basierend auf dem Versprechen können Sie dann oder problemlos verwenden Catch, um die Anfrage zu verarbeiten

4. JSON-Daten automatisch konvertieren

2 Wie verwende ich?

Sie können die folgenden Methoden verwenden

1. npm install axios --save
2. bower install axios --save
3. <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

3, um HTTP-Anfragen zu kapseln
Das Beispiel auf der offiziellen Website:

axios.get('/user?ID=12345')
  .then(function(response){
    console.log(response);
  })
  .catch(function(err){
    console.log(err);
  });

Auf dieser Grundlage sollten wir Post get kapseln erneut in http Für die Put-Delete-Methode müssen Sie nur die Schnittstellenfunktion aufrufen und Parameter für die spezifische Seite übergeben. Den Rest wie URL, Header usw. sollten wir kapseln.
Verwenden Sie beispielsweise eine Funktion in index.vue, um die entsprechenden Benutzerinformationen über die ID abzurufen, und das zurückgegebene Ergebnis ist das Ergebnis der then-Methode

API.getUserInfo({id:'01'}).then((result)=>{})

4 Implementierungsidee
Erstellen Sie eine neue Datei, Erstellen Sie eine Axios-Objektinstanz wie axios.js

import axios from 'axios';
import router from '../router';
// 创建axios实例
const service = axios.create({            
  timeout: 30000 // 请求超时时间                                   
})
// 添加request拦截器 
service.interceptors.request.use(config => {         
  return config
}, error => {
  Promise.reject(error)
})
// 添加respone拦截器
service.interceptors.response.use(                  
  response => {
    let res={}; 
    res.status=response.status
    res.data=response.data;
    return res;
  },
  error => {
    if(error.response && error.response.status == 404){
     router.push('/blank.vue')
    }
   
        
    return Promise.reject(error.response)
  }
)

export function get(url, params = {}) {
  params.t = new Date().getTime(); //get方法加一个时间参数,解决ie下可能缓存问题.
  return service({
    url: url,
    method: 'get',
    headers: {     
    },
    params
  })
}


//封装post请求
export function post(url, data = {}) { 
  //默认配置 
  let sendObject={
    url: url,
    method: 'post',
    headers: {
      'Content-Type':'application/json;charset=UTF-8'       
    },
    data:data
  };
  sendObject.data=JSON.stringify(data);
  return service(sendObject)
}

//封装put方法 (resfulAPI常用)
export function put(url,data = {}){
  return service({
    url: url,
    method: 'put',
    headers: {
      'Content-Type':'application/json;charset=UTF-8'       
    },
    data:JSON.stringify(data)
  }) 
}
//删除方法(resfulAPI常用)
export function deletes(url){
  return service({
    url: url,
    method: 'delete',
    headers: {}
  }) 
}

//不要忘记export
export {
  service
}

Der obige Code implementiert hauptsächlich eine grundlegende Axios-Kapselung und ruft das Antwortobjekt ab, wenn die Anfrage erfolgreich ist. Wir müssen hauptsächlich mehrere nützliche Informationen erhalten, z als Statuscode, Daten Das war's, behandeln Sie gleichzeitig den Fehler, geben Sie beispielsweise 404 zurück und springen Sie zu einer neuen Schnittstelle

Kapseln Sie die Schnittstellenfunktion
Erstellen Sie eine neue Datei, z. B. API. js

import {get, post,deletes,put} from './axios.js' ;//导入axios实例文件中方法
let bsae_api = process.env.BASE_API ? './'+process.env.BASE_API :'..' //获取项目api请求地址
//根据id获取用户信息
export const getUserInfoById=(id)=>{
    return get(`${bsae_api}/web/user/${id}`); //resfulapi风格
}

Verwenden Sie für bestimmte Seiten index.vue

import API from '@/utils/api'
getUserInfo(){
  API.getUserInfoById('01).then((result)=>{
   }).catch((error)=>{
 })
}

Das Obige ist eine grundlegende Einführung in die Axios-Verpackung

Verwandte Empfehlungen:

Vue verwendet Axios und Verpackung

Detaillierte Erklärung des Abrufaufrufs im Axios-Paket

Das obige ist der detaillierte Inhalt vonGrundlegende Einführung in die Axios-Verpackung in Vue (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!