Vue中常用的Axios封装及其方法剖析

Vue中Axios封装及其常用方法介绍

Axios是一款基于Promise实现的HTTP库，它的优点在于具有良好的可读性、易用性以及可扩展性。Vue作为一款流行的前端框架，也对Axios提供了全面支持。本文将介绍如何在Vue中进行Axios封装，并且介绍Axios常用的一些方法。

一、Axios封装

在开发过程中，我们常常需要对Axios进行一些自定义的封装，例如添加固定headers、统一处理错误返回等。这样可以使代码更加简洁、易于维护。下面将介绍如何封装Axios。

（1）封装请求配置

我们先来定义一个config.js文件，用于统一管理请求的配置。

import axios from 'axios'

// 创建一个axios的实例
const Axios = axios.create({
  baseURL: '',
  timeout: 5000,
  headers: {
    'Content-Type': 'application/json;charset=UTF-8'
  }
})

// 添加请求拦截
Axios.interceptors.request.use(
  config => {
    // 在发送请求之前做些什么
    return config
  },
  error => {
    // 对请求错误做些什么
    return Promise.reject(error)
  }
)

// 添加响应拦截器
Axios.interceptors.response.use(
  response => {
    // 对响应数据做些什么
    return response
  },
  error => {
    // 对响应错误做些什么
    return Promise.reject(error)
  }
)

export default Axios

在这个文件中，我们定义了一个Axios实例，并且添加了请求拦截、响应拦截器。这样在发送请求时，就会先经过请求拦截器进行处理，在响应时也会先经过响应拦截器进行处理。

（2）封装请求方法

在config.js文件中已经定义了Axios实例，我们可以根据需要创建不同的请求方法。例如，我们现在需要定义一个get方法。

import Axios from './config'

export function get(url, params = {}) {
  return new Promise((resolve, reject) => {
    Axios.get(url, {
        params: params
      })
      .then(response => {
        resolve(response.data)
      })
      .catch(error => {
        reject(error)
      })
  })
}

这里的get方法使用了Axios实例的get方法，并且在请求时传入了url和params，这样就可以发送GET请求。在请求成功时，我们使用Promise将返回的数据resolve出去，在请求失败时，将错误reject出去。

同样的，我们可以根据需要进行不同类型的请求方法的封装。

二、Axios常用方法介绍

在完成了Axios的封装后，下面将介绍Axios常用的一些方法。

（1）GET请求

get(url[, config])

url：请求的url，可以使用相对路径或者绝对路径。

config：请求的配置，包含params、headers等等。

import Axios from './config'

Axios.get('/user?id=1')
  .then(response => {})
  .catch(error => {})

（2）POST请求

post(url[, data[, config]])

url：请求的url，可以使用相对路径或者绝对路径。

data：请求的数据。

config：请求的配置，包含headers等等。

import Axios from './config'

Axios.post('/user', {
    id: 1,
    name: 'user'
  })
  .then(response => {})
  .catch(error => {})

（3）PUT请求

put(url[, data[, config]])

url：请求的url，可以使用相对路径或者绝对路径。

data：请求的数据。

config：请求的配置，包含headers等等。

import Axios from './config'

Axios.put('/user', {
    id: 1,
    name: 'user'
  })
  .then(response => {})
  .catch(error => {})

（4）DELETE请求

delete(url[, config])

url：请求的url，可以使用相对路径或者绝对路径。

config：请求的配置，包含headers等等。

import Axios from './config'

Axios.delete('/user?id=1')
  .then(response => {})
  .catch(error => {})

（5）请求拦截

在config.js文件中，我们定义了一个请求拦截器。可以使用请求拦截器做一些自定义的数据处理、添加请求头等等。

Axios.interceptors.request.use(
  config => {
    // 在发送请求之前做些什么
    config.headers.Authorization = 'token'
    return config
  },
  error => {
    // 对请求错误做些什么
    return Promise.reject(error)
  }
)

（6）响应拦截

在config.js文件中，我们定义了一个响应拦截器。可以使用响应拦截器做一些自定义的错误处理、数据处理等等。

Axios.interceptors.response.use(
  response => {
    // 对响应数据做些什么
    return response
  },
  error => {
    // 对响应错误做些什么
    if (error.response) {
      // do something
    }
    return Promise.reject(error)
  }
)

三、总结

本文介绍了如何在Vue中对Axios进行封装，以及Axios常用的一些方法。Axios的优点在于易用性、可扩展性，可以在开发中帮助我们快速地发送HTTP请求，并且处理响应结果。在使用Axios时，我们应该做到统一的请求配置管理，便于后期维护。同时也应该根据需要封装不同类型的请求方法，满足各种开发需求。