当前位置：首页 > news >正文

Vue2封装Axios

news 2025/8/21 11:17:35

一、介绍

Axios 是一个基于 promise 的 HTTP 库，简单的讲就是可以发送get、post等请求。

二、安装

npm install axios --save

二、axios不同请求方式

axios(config)

这是 Axios 的核心方法，用于发送自定义配置的 HTTP 请求。通过传入一个包含请求配置的对象，可以灵活设置请求的各种参数。

axios({method: 'get',url: 'http://api.example.com/data',params: { id: 123 }
}).then(response => {console.log(response.data);
});

axios.request(config)

与 axios(config) 功能完全相同，是发送请求的通用方法。可以理解为 axios(config) 的别名。

axios.request({method: 'post',url: 'http://api.example.com/submit',data: { name: 'John' }
});

axios.get(url[, config])

发送 GET 请求的便捷方法。用于从服务器获取数据。

====》url : 请求的 URL 地址

====》config : 可选的配置对象

axios.get('http://api.example.com/users', {params: { page: 1, limit: 10 }
});

axios.delete(url[, config])

发送 DELETE 请求的便捷方法。通常用于删除服务器上的资源。

axios.delete('http://api.example.com/users/123');

axios.head(url[, config])

发送 HEAD 请求的便捷方法。只请求资源的头部信息，不返回主体内容。

axios.head('http://api.example.com/document');

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

发送 POST 请求的便捷方法。用于向服务器提交数据。

====》url : 请求的 URL 地址

====》data : 要发送的数据

====》config : 可选的配置对象

axios.post('http://api.example.com/users', {name: 'Alice',email: 'alice@example.com'
});

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

发送 PUT 请求的便捷方法。通常用于更新服务器上的资源（替换整个资源）。

axios.put('http://api.example.com/users/123', {name: 'Updated Name'
});

总结

所有这些方法都返回一个 Promise 对象，可以使用 .then() 和 .catch() 处理响应和错误。
axios(config) 和 axios.request(config) 是通用方法，可以通过配置 method 属性支持各种 HTTP 请求类型。
其他方法（如 get 、 post 等）是特定 HTTP 方法的便捷封装，使代码更简洁易读。
在实际开发中，通常会根据具体的请求类型选择对应的便捷方法，而不是总是使用通用方法。

三、简单使用

在页面中，先导入axios

在created中

测试：页面启动查看控制台是否有返回值

Bug：

这个是因为跨域问题导致，在后端controller加上@CrossOrigin

AxiosError {message: 'Network Error', name: 'AxiosError', code: 'ERR_NETWORK', config: {…}, request: XMLHttpRequest, …}
code: "ERR_NETWORK"
config: {transitional: {…}, adapter: Array(3), transformRequest: Array(1), transformResponse: Array(1), timeout: 0, …}
message: "Network Error"
name: "AxiosError"
request: XMLHttpRequest {onreadystatechange: null, readyState: 4, timeout: 0, withCredentials: false, upload: XMLHttpRequestUpload, …}
stack: "AxiosError: Network Error\n    at XMLHttpRequest.handleError (webpack-internal:///./node_modules/axios/lib/adapters/xhr.js:116:14)\n    at Axios.request (webpack-internal:///./node_modules/axios/lib/core/Axios.js:58:41)"
[[Prototype]]

四、二次封装

1、为什么需要封装？？

方便管理和操作和维护

（1）请求的url地址的统一管理

（2）某些接口需要传递headers请求头，可以进行统一管理

2、封装步骤

2.1 在src中创建utils文件夹，在utils中新建request.js文件

2.2 在request.js中配置以下内容

步骤：引入axios -> 创建axios对象 -> 请求拦截器 -> 响应拦截器 -> 导出

//1、引入axios
import axios from "axios";//2、创建axios对象
const service = axios.create({baseURL:"http://localhost:8080"
});//3、请求拦截器  前端给后端发送数据
service.interceptors.request.use(// 响应成功拦截config => {// 对响应数据做点什么return config;},// 响应错误拦截error => {// 对响应错误做点什么Promise.reject(error)});//4、响应拦截器 后端给前端返回数据
service.interceptors.response.use(// 响应成功拦截response => {// 这个响应数据会返回给页面进行打印和使用return response.data;},// 响应错误拦截error => {// 对响应错误做点什么Promise.reject(error)});export default service;