Introduction de base au packaging axios dans vue (avec code)

Cet article vous apporte une introduction de base au packaging axios dans Vue (avec code). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Axios est une bibliothèque HTTP basée sur des promesses qui peut être utilisée dans les navigateurs et node.js. Utiliser axios dans un projet vue est un choix très judicieux, car les responsables de vue ont annoncé qu'ils ne maintiendraient plus vue-resource et recommandent l'utilisation d'axios

1 Pourquoi choisir axios ?

1. En utilisant axios, vous pouvez effectuer une interception requête-réponse unifiée. Par exemple, lorsque nous répondons, nous interceptons les informations de réponse, déterminons le code d'état, puis faisons apparaître le message d'erreur

2. Définissez le délai d'expiration de la demande, par exemple, arrêtez la demande s'il n'y a pas de réponse après 3000 ms

3. Sur la base de la promesse, vous pouvez facilement utiliser then ou catch pour traiter la demande

4. Convertir automatiquement les données json

2 Comment utiliser ?

Vous pouvez utiliser les méthodes suivantes

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

3 pour encapsuler les requêtes http

L'exemple donné par le site officiel :

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

Sur cette base nous devrait encapsuler à nouveau http. La méthode post get put delete dans la page spécifique n'a besoin que d'appeler la fonction d'interface et de transmettre les paramètres. Nous devons encapsuler le reste tel que l'URL, l'en-tête, etc.

Par exemple, utilisez une fonction dans index.vue pour obtenir les informations utilisateur correspondantes via id, et le résultat renvoyé est dans le résultat de la méthode then

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

4 Idées d'implémentation

Créer un nouveau fichier, construisez une instance d'objet axios telle que 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
}

Le code ci-dessus implémente principalement une encapsulation axios de base et obtient l'objet de réponse lorsque la requête réussit. plusieurs informations utiles, telles que le code d'état et les données, sont suffisantes, et les erreurs sont traitées en même temps, par exemple, en renvoyant 404, nous passons à une nouvelle interface

Fonction d'interface d'encapsulation

Créer un nouveau fichier, tels que 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风格
}

Spécifique La page utilise index.vue

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

Ce qui précède est une introduction de base à certains packages axios

Recommandations associées :

vue utilise axios et packaging

Explication détaillée de l'appel de récupération du package axios

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!