前端axios请求的二次封装

axios的二次封装

什么是axios?
axios是一个基于Promise的HTTP客户端，用于浏览器和Node.js。它可以在浏览器中发送异步HTTP请求，并且支持拦截请求和响应、转换请求和响应数据、取消请求等功能。axios可以用于发送GET、POST、PUT、DELETE等各种类型的请求，并且可以设置请求头、请求参数、超时时间等。它是一个简单易用、功能强大的HTTP客户端工具。"
特性
从浏览器中创建 XMLHttpRequests
从 node.js 创建 http 请求
支持 Promise API
拦截请求和响应
转换请求数据和响应数据
取消请求
自动转换 JSON 数据
客户端支持防御 XSRF

为什么要进行axios的二次封装了？

在实际的前端项目开发中，使用axios进行网络请求是非常常见的做法。但是，直接使用axios可能会导致代码重复、难以维护等问题。因此，前端开发者通常会对axios进行二次封装，以便更好地满足项目的需求。

以下是一些常见的原因：

统一处理请求和响应：通过二次封装axios，可以在请求发送前和响应返回后进行统一的处理，例如添加请求头、处理错误信息等。这样可以减少重复的代码，并且方便在整个项目中进行统一的错误处理。
简化接口调用：通过二次封装axios，可以将接口的调用方式进行统一，例如将接口的URL、请求方法、请求参数等进行封装，使得接口调用更加简洁和易读。
封装通用功能：在二次封装axios的过程中，可以根据项目的需求封装一些通用的功能，例如请求的loading状态、请求的超时处理、请求的重试机制等。这样可以提高开发效率，并且减少重复的代码。
方便切换请求库：通过二次封装axios，可以将请求库的使用进行抽象，使得在项目中切换请求库变得更加容易。例如，如果将来需要替换axios为其他请求库，只需要修改封装的代码，而不需要在整个项目中修改每个请求的代码。

总之，二次封装axios可以提高代码的可维护性、可读性和可扩展性，使得前端开发更加高效和便捷。

1.新建request.js文件

import axios from 'axios'
import cookie from 'js-cookie'
import store from '@/store'
import {
    
     Message } from 'element-ui'
// 请求token常量
import {
    
     USER_LOGIN_TOKEN } from '@/config/constantMap'
const request= axios.create({
    
    
  baseURL: process.env.VUE_APP_BASE_API,
  timeout: 5 * 60 * 1000 // 请求超时时间戳
})

// 请求拦截器
request.interceptors.request.use(
  (config) => {
    
    
    config.headers = {
    
    
      Authorization: cookie.get(USER_LOGIN_TOKEN) || '',
      Accept: 'application/json',
      ContentType: 'application/json;charset=UTF-8'
    }
    return config
  },
  (error) => {
    
    
    return Promise.reject(error)
  }
)
// 响应拦截器
request.interceptors.response.use(
  (response) => {
    
    
    const {
    
     code, success, message} = response.data
    if (code == 200 || success) {
    
    
      return response.data
    } else {
    
    
     // 对于登录失效进行单独判断
      if (code == 401) {
    
    
        window.location.reload(true)
        store.dispatch('LoginOut')
      }
      // 对于非 200 的状态码进行统一拦截提示
      Message.error(message）
      return Promise.reject(response.data)
    }
  },
  (error) => {
    
    
    // 对接口响应错误进行统一处理
    const {
    
     message } = error.response.data
    Message({
    
     message, type: 'error' })
    return Promise.reject(error.response.data)
  }
)
export default request

2.在api文件模块中引入(user.js)

import axios from '@/utils/axios'
// get 请求
export const getUserInfo = (id) => axios({
    
     method: 'get', url: '/userInfo/getUserInfo/' + id })
// post 请求
export const login= (daa) => axios({
    
     method: 'post', url: '/userInfo/login', data })
// delete 请求
export const deleteAccount= (userId) => axios({
    
     method: 'delete', url: '/userInfo/deleteAccount/', userId})

3.页面文件中使用

import {
    
     getUserInfo } from '@/api/user.js'
mounted(){
    
    
   this.GetUserInfo ()
},
methods：{
    
    
     async GetUserInfo () {
    
    
      try {
    
    
       // try 中执行接口调用成功并且返回200的状态值
        const {
    
     data, code } = await getUserInfo (this.userId)
        } catch(err){
    
    
        // 在catch 中捕获错误
         this.$message.error(err)
      }
}