Vue.js - axios网络请求
1. 前言
Axios
是一个基于 Promise 的 HTTP 客户端,通常用于向服务器发送请求并处理响应。它广泛应用于前端开发中,尤其是在 Vue.js、React 等框架中,进行 API 请求 和数据交互。
Axios
提供了简洁的 API,能够执行 GET、POST、PUT、DELETE 等 HTTP 请求,并且支持请求和响应的拦截、取消请求、跨域请求等功能。它非常适合与后端 API 进行通信,处理 JSON 数据,和前端数据绑定
2. Promise类型
2.1 response.data
- 包含服务器返回的实际数据(通常是 JSON 格式的数据)。这通常是我们最关心的信息。
- 例如:如果后端返回的是
{ "status": "success", "message": "Logged in successfully" }
,那么你可以通过response.data
访问该数据。
2.2 response.status
- HTTP 响应的状态码,表示请求的结果。
- 例如,
200
表示请求成功,401
表示未经授权,500
表示服务器错误等。
2.3 response.statusText
- HTTP 响应的状态文本,通常是一个简短的描述(例如,
"OK"
或"Unauthorized"
)。 - 例如,当状态码是
200
时,通常是"OK"
。
2.4 response.headers
- 响应头部的信息,是一个包含响应头的对象。你可以用它来获取更多的服务器信息,比如
Content-Type
、Authorization
等。 - 例如,
response.headers['content-type']
可以用来获取返回数据的类型。
2.5 response.config
请求的配置信息,是你在发送请求时传入的配置对象。比如请求的 url
、method
、headers
等。
2.6 response.request
这是原生的请求对象(例如 XMLHttpRequest
或 fetch
),你可以用它来了解请求的底层实现和详细信息。
3. 基本用法
2.1 发送GET请求
GET请求用于从服务器中获取数据
import axios from 'axios'
axios.get('https://www.xxx.com')
.then()
.catch()
then
通过使用get函数之后,如果请求成功,则会返回一个Promise对象,使用then函数进一步对promise对象处理请求成功之后的相应数据。如果失败,则catch方法获取其中的错误
axios.get('https://www.xxx.com').then(回调函数)
then中接受一个回调函数,将服务器返回的响应数据作为参数传递给回调函数
可以使用常规函数形式进行书写,也可以通过箭头函数的形式书写
常规形式:
axios.get('https://www.xxx.com').then(function(response){console.log('Heelo')}.catch(
function(error){'请求失败',error})
箭头函数形式:
axios.get('https://www.xxx.com').then(response => {console.log(response.data})
传入response数据至函数当中,适合逻辑结构不复杂的回调函数使用,response.data获取promise对象中的数据,一般是我们想获取的数据结果,通常为JSON类型
2.2 发送post请求
POST请求用于向服务器发送数据,比如表单数据或JSON数据
import axios from 'axios';
// 发送 POST 请求
axios.post('https://api.example.com/login', {
username: 'user1',
password: 'password123'
})
.then(response => {
console.log('响应数据:', response.data); // 处理响应数据
console.log('状态码:', response.status); // HTTP 状态码(例如 200)
console.log('状态文本:', response.statusText); // 状态文本(例如 "OK")
console.log('响应头:', response.headers); // 响应头(如 Content-Type 等)
console.log('请求配置:', response.config); // 请求的配置信息
})
.catch(error => {
console.error('请求失败:', error); // 处理请求错误
});
2.3 配置请求
格式为在get函数之后声明以对象的形式,配置相应的信息即可
axios.get('https://api.example.com/data', {
headers: {
'Authorization': 'Bearer token123'
},
timeout: 5000 // 请求超时设置为5秒
})
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error(error);
});
2.4 发送多个请求
如果需要发送多个请求需要使用Promise.all方法,传入一个数组包含多个axios请求
Promise.all([axios.get("htps://xxxx"),axios.get("https://www")])
剩余步骤一致,使用then方法以及对应的回调函数,传入回调函数以数组形式进行传入
<template>
<h1>This is an example</h1>
<button @click="request">Click to get more information</button>
<p v-if="user1">{{ user1 }}</p>
<p v-if="user2">{{ user2 }}</p>
</template>
<style>
/* 可以根据需要添加样式 */
</style>
<script>
import axios from 'axios'
import { ref } from 'vue' // 使用 ref 来处理简单数据
export default {
setup() {
// 使用 ref 创建响应式数据
const user1 = ref(null);
const user2 = ref(null);
// 请求函数
const request = () => {
// 使用 Promise.all 来并行请求
Promise.all([
axios.get('https://api.example.com/data1'),
axios.get('https://api.example.com/data2')
])
.then(([response1, response2]) => {
user1.value = response1.data; // 更新响应式数据
user2.value = response2.data;
})
.catch(error => {
console.error('Error occurred:', error);
});
};
return { user1, user2, request };
}
};
</script>