Paquete de Vue Axios---kalrry

1. Introducción

1. ¿Qué es Axios?

1. Explicación oficial : Axios es una biblioteca HTTP basada en promesas. Utiliza el módulo http nativo de node.js en el lado del servidor y XMLHttpRequests en el lado del cliente (navegador).
2. Principio esencial: axios es esencialmente un paquete de XHR nativo, pero es una versión de implementación de Promise, que se ajusta a la última especificación de ES.
3. Comprensión personal: se utiliza para obtener datos del fondo para la interacción.

2. Características principales

1. Crear XMLHttpRequests desde el navegador
2. Crear solicitud http desde node.js
3. Compatibilidad con la API de promesa
4. Interceptar solicitudes y respuestas
5. Transformar datos de solicitud y respuesta
6. cancelar la solicitud
7. Convierte automáticamente datos JSON
8. Soporte al cliente para la defensa XSRF

2. Por qué empaquetar Axios

2. Axios envía una solicitud

1. Haz una solicitud GET

const axios = require('axios');
// 向给定ID的用户发起请求
axios.get('/user?ID=12345')
  .then(function (response) {
    
    
    // 处理成功情况
    console.log(response);
  })
  .catch(function (error) {
    
    
    // 处理错误情况
    console.log(error);
  })
  .then(function () {
    
    
    // 总是会执行
  });
 
// 上述请求也可以按以下方式完成（可选）
axios.get('/user', {
    
    
    params: {
    
    
      ID: 12345
    }
  })
  .then(function (response) {
    
    
    console.log(response);
  })
  .catch(function (error) {
    
    
    console.log(error);
  })
  .then(function () {
    
    
    // 总是会执行
  });  
 
// 支持async/await用法
async function getUser() {
    
    
  try {
    
    
    const response = await axios.get('/user?ID=12345');
    console.log(response);
  } catch (error) {
    
    
    console.error(error);
  }
}

2. Haz una solicitud POST

axios.post('/user', {
    
    
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    
    
    console.log(response);
  })
  .catch(function (error) {
    
    
    console.log(error);
  });

3. Paquete Axios

1. Instalar Axios

 npm install axios -S 或者 yarn add axios -S

2. Envasado preliminar de Axios

1. Primero, cree un nuevo archivo request.js en el proyecto para la encapsulación preliminar de axios;

//在request.js文件中写入以下代码：
import axios from "axios"
const service = axios.create({
    
    
  baseURL:'', //服务器地址,一般会按照生产,开发环境进行不同的配置
  timeout: 5000  //请求超时前的毫秒数; 如超过规定的毫秒数请求会被终止
})
// 设置请求拦截器 :  
service.interceptors.request.use(
  (config) => {
    
      
    // 一般会在这里对请求头进行一些设置 ; 可以根据自己项目的需求进行设置
    return config
  },
  (error) => {
    
    
    return Promise.reject(error)
  }
)
// 设置 响应拦截器 :
service.interceptors.response.use(
  // 响应成功
  (response) => {
    
    
    // 请求响应成功设置
  },
  // 响应失败
  (error) => {
    
    
   // 请求响应失败的设置
    return Promise.reject(error)
  }
)
export default axios

manifestación

import axios from 'axios'
import {
    
     Message } from 'element-ui'
import store from '@/store'
import {
    
     hasToken } from '@/utils/auth.js'
 
const service = axios.create({
    
    
  baseURL: process.env.VUE_APP_BASE_API,
  timeout: 6000
})
 
service.interceptors.request.use(
  (config) => {
    
    
    if (store.getters.token) {
    
    
      config.headers.Authorization = store.getters.token
      if (hasToken()) {
    
    
        store.dispatch('user/logout')
        return Promise.reject(new Error('token 失效'))
      }
    }
 
    return config
  },
  (error) => {
    
    
    return Promise.reject(error)
  }
)
 
// 设置响应拦截器
service.interceptors.response.use(
  // 响应成功
  (response) => {
    
    
    const {
    
     data, message, success } = response.data
    if (success) {
    
    
      return data
    } else {
    
    
      Message({
    
    
        showClose: true,
        message: message,
        type: 'error'
      })
    }
  },
  // 响应失败
  (error) => {
    
    
    if (
      error.response &&
      error.response.data &&
      error.response.data.code === 401
    ) {
    
    
      store.dispatch('user/logout')
    }
    Message({
    
    
      showClose: true,
      message: error.message,
      type: 'error'
    })
    return Promise.reject(error)
  }
)
 
export default service

3. Encapsulación de solicitudes de Axios

1. Cree un nuevo archivo api.js e importe el request.js recién empaquetado;

import request from '@/utils/request.js'
 
/**
 *  写法一 : 比较具体
 */
export const loginAPI = (data) => {
    
    
  return request({
    
    
    url: '接口地址',
    method: '请求方式',
    data
  })
}
 
 
/**
 *  写法二 : 复用性高一些
 */
export const getAPI = (url, data) => {
    
    
  return request({
    
    
    url: url,
    method: 'get',
    params: data
  })
}
 
export const putAPI = (url, data) => {
    
    
  return request({
    
    
    url: url,
    method: 'put',
    data: data
  })
}
 
export const postAPI = (url, data) => {
    
    
  return request({
    
    
    url: url,
    method: 'post',
    data: data
  })
}

4. Uso

// 直接在需要使用的地方导入即可
import {
    
     getAPI, postAPI } from '@/apis/api.js'