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时，我们应该做到统一的请求配置管理，便于后期维护。同时也应该根据需要封装不同类型的请求方法，满足各种开发需求。
以上就是vue中axios封装及其常用方法介绍的详细内容。