axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，在vue中数据请求需要先安装axios。这篇文章主要介绍了vue axios数据请求及vue中使用axios的方法,需要的朋友可以参考下
Vue.js 是一款流行的前端框架，而 Axios 是一个常用的 JavaScript 库，用于发起 HTTP 请求。Vue 和 Axios 结合使用，能够方便地在 Vue 应用中处理数据获取和发送。以下是关于 Vue 中使用 Axios 进行数据请求的详细介绍：
1. **Axios 的基本介绍**
Axios 是一个基于 Promise 的 HTTP 客户端，可以用于浏览器和 Node.js 环境。它的特性包括：
- 支持 Promise API，使得异步操作更易于理解和管理。
- 可以拦截请求和响应，添加自定义逻辑。
- 自动转换 JSON 数据，无需手动处理。
- 支持取消请求，避免不必要的网络请求。
- 防止 CSRF（跨站请求伪造）和 XSRF（跨站脚本攻击）。
2. **在 Vue 中安装 Axios**
在 Vue 项目中使用 Axios 首先需要通过 npm 安装：
```
npm install axios --save
```
3. **使用 Axios 进行数据请求**
- **GET 请求**：
在 Vue 组件中导入 Axios，然后在 `methods` 对象中定义请求方法。例如，以下代码展示了如何在组件的 `mounted` 生命周期钩子中获取数据：
```javascript
import axios from "axios";
export default {
data() {
return {
list1: [],
};
},
methods: {
getInfo() {
const url = "url";
axios
.get(url)
.then((res) => {
this.list1 = res.data;
})
.catch((error) => {
console.error(error);
});
},
},
mounted() {
this.getInfo();
},
};
```
- **POST 请求**：
POST 请求的语法与 GET 类似，只是在 `axios.post()` 方法中传入参数。例如：
```javascript
postInfo() {
const url = "...";
const params = new URLSearchParams();
params.append("key", index);
axios
.post(url, params)
.then((res) => {
console.log(res);
})
.catch((err) => {
console.error(err);
});
}
```
4. **配置 Axios**
在大型项目中，通常会进行全局配置，例如设置基础 URL、请求头等。可以在项目中创建一个 `api/index.js` 文件，进行配置：
```javascript
import axios from "axios";
const http = axios.create({
baseURL: "http://localhost:8080/",
withCredentials: true,
headers: {
"Content-Type": "application/x-www-form-urlencoded;charset=utf-8",
},
transformRequest: (data) => {
let newData = "";
for (let k in data) {
if (data.hasOwnProperty(k)) {
newData += encodeURIComponent(k) + "=" + encodeURIComponent(data[k]) + "&";
}
}
return newData;
},
});
const apiAxios = (method, url, params, response) => {
http({
method,
url,
data: method === "POST" || method === "PUT" ? params : null,
params: method === "GET" || method === "DELETE" ? params : null,
})
.then(response)
.catch(response);
};
export default {
get: (url, params, response) => apiAxios("GET", url, params, response),
post: (url, params, response) => apiAxios("POST", url, params, response),
// ... 其他 HTTP 方法
};
```
这样，你可以通过导入 `api` 对象来发起请求，如 `api.get()` 或 `api.post()`，同时统一处理请求和响应。
5. **使用 Axios 进行错误处理**
在实际应用中，应确保处理可能发生的错误。通常，这可以通过在每个请求的 `.catch()` 部分完成，或者通过设置全局错误处理器。
6. **其他 Axios 功能**
Axios 提供了丰富的功能，如上传/下载进度监听、请求/响应 timeout 设置、自定义认证等。你可以根据需要进一步探索和利用这些功能。
Vue 和 Axios 的结合使得数据交互变得更加便捷，通过封装和配置，可以构建高效、健壮的前端应用。理解并熟练运用 Axios，将有助于提升 Vue 项目的开发效率和质量。
