ToB企服应用市场:ToB评测及商务社交产业平台

标题: 2024从零开始使用VSCode编程之“axios” [打印本页]

作者: 大号在练葵花宝典 时间: 2024-9-9 03:54
标题: 2024从零开始使用VSCode编程之“axios”
目次
一、axios简介
注意：本教程仅供参考，详细教程请前去官方网站查看起步 | Axios Docs (axios-http.com)
二、axios的安装
三、axios
目次
一、axios简介
注意：本教程仅供参考，详细教程请前去官方网站查看起步 | Axios Docs (axios-http.com)
二、axios的安装
三、axios
1、哀求方法(RESTful API风格)
2、哀求方法的代码实现(RESTful API风格)
3、一个较为完备的哀求布局（演示）
4、axios常见哀求配置
5、axios的响应布局
6、拦截器（通常用于登录界面的拦截）
四、axios的简单案例
五、参考文档

本文只为记录并资助有须要的小伙伴学习使用VScode举行前端开发

注意本教程发布于2024年7月，软件为win1.91，后续版本使用时也可参考
一、axios简介

注意：本教程仅供参考，详细教程请前去官方网站查看起步 | Axios Docs (axios-http.com)

简介：axios是基于AJAX（异步JavaScript和XML）举行构建的，但它对AJAX举行了封装和扩展，使其更易用和功能更强盛，axios也主要用于前端和后端的交互当中，主要用于发送HTTP哀求和处置处罚响应数据
注意：相较于vue这类框架axios更像是一个工具库，以是axios须要学习的东西就没有vue那么多

二、axios的安装

①新建终端

②输入下令"npm install axios"安装axios

③输出类似以下内容表示安装成功

也可以用下令检查“npm list axios”

三、axios

axios在前端开发中主要用于在浏览器中发送哀求，简便的API使得它发送和响应哀求变得简单
1、哀求方法(RESTful API风格)

①get获取资源，通常用于获取数据，例如获取商品信息
②post创建新资源，通常用于向服务端传送数据，例如上传个人信息
③put更新现有资源，通常用于更新服务器上的现有资源，例如更新用户的个人信息。
④Delete删除资源，通常用于删除数据，例如删除收藏商品
⑤patch部分更新资源，通常用于对资源举行部分更新，而不是完全替换，例如更改用户名
2、哀求方法的代码实现(RESTful API风格)

在前端的axios代码编写中有两种书写格式，
第一种是直接调用（.get）：得当简单哀求
第二种是通过配置对象实现（method:'get'）：得当须要配置很多选项的哀求，复杂哀求

①get获取资源

直接

axios.get('https://cunminbiao/user', {
params: {
Name: '张三'
}
})
.then(response => {
console.log('Response Data:', response.data); // 处理响应数据
})
.catch(error => {
console.error('Error with request:', error); // 处理错误
});

复制代码

配置对象

axios({
method: 'get', // 请求方法
url: 'https://cunminbiao/userlist', // 请求 URL
params: { // URL 查询参数
Name: '张三' // 确保参数名称和服务器期望的格式匹配
}
})
.then(response => {
console.log('Response Data:', response.data); // 处理响应数据
})
.catch(error => {
console.error('Error with request:', error); // 处理错误
});

复制代码

②post创建新资源

直接

axios.post('https://cunminbiao/userlist', {
firstName: '张',
lastName: '三'
})
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error('Error posting data:', error);
});

复制代码

配置对象

const config = {
method: 'post',
url: 'https://cunminbiao/userlist',
data: {
firstName: '张',
lastName: '三'
},
headers: { 'Content-Type': 'application/json' }
};
axios(config)
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error('Error with request:', error);
});

复制代码

③put更新现有资源

直接

axios.put('https://cunminbiao/user', {
firstName: '张',
lastName: '三'
})
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error('Error updating data:', error);
});

复制代码

配置对象

axios({
method: 'patch', // 请求方法
url: 'https://cunminbiao/user', // 请求 URL
data: { // 请求体中的数据
firstName: '张'
lastName: '三'
},
headers: { 'Content-Type': 'application/json' } // 请求头
})
.then(response => {
console.log('Response Data:', response.data); // 处理响应数据
})
.catch(error => {
console.error('Error with request:', error); // 处理错误
});

复制代码

④Delete删除资源

直接

axios.delete('https://cunminbiao/user/张三')
.then(response => {
console.log('Data deleted');
})
.catch(error => {
console.error('Error deleting data:', error);
});

复制代码

配置对象

axios({
method: 'delete',
url: 'https://cunminbiao/user/张三'
})
.then(response => {
console.log('User deleted:', response.data);
})
.catch(error => {
console.error('Error with request:', error);
});

复制代码

⑤patch部分更新资源

直接

axios.patch('https://cunminbiao/user/张三', {
lastName: '四'
})
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error('Error updating data:', error);
});

复制代码

配置对象

axios({
method: 'patch', // 请求方法
url: 'https://cunminbiao/user/张三', // 请求 URL
data: { // 请求体中的数据
lastName: '四'//改为张四
},
headers: { 'Content-Type': 'application/json' } // 请求头
})
.then(response => {
console.log('Response Data:', response.data); // 处理响应数据
})
.catch(error => {
console.error('Error with request:', error); // 处理错误
});

复制代码

3、一个较为完备的哀求布局（演示）

axios({
method: 'get', // 请求方法，如 'get', 'post', 'put', 'delete', 'patch'
url: 'https://cunminbiao/data', // 请求的 URL 地址
params: { // URL 查询参数，用于 GET 请求
key1: 'value1',
key2: 'value2'
},
data: { // 请求体数据，用于 POST、PUT、PATCH 请求
key1: 'value1',
key2: 'value2'
},
headers: { // 请求头部
'Content-Type': 'application/json',
'Authorization': 'Bearer your_token_here'
},
auth: { // HTTP 基本认证
username: 'your_username',
password: 'your_password'
},
timeout: 1000, // 请求超时设置，单位为毫秒
responseType: 'json', // 响应数据类型，如 'json', 'text', 'blob'
maxRedirects: 5, // 最大重定向次数
paramsSerializer: function (params) { // 自定义查询参数的序列化函数
return Qs.stringify(params, { indices: true });
},
onDownloadProgress: function (progressEvent) { // 处理下载进度
console.log('Download progress:', progressEvent);
},
onUploadProgress: function (progressEvent) { // 处理上传进度
console.log('Upload progress:', progressEvent);
},
withCredentials: true // 是否发送跨域请求时带上凭证（如 Cookies）
})
.then(response => {
console.log('Response Data:', response.data); // 处理响应数据
})
.catch(error => {
console.error('Error with request:', error); // 处理错误
});

复制代码

4、axios常见哀求配置解释（使用先容）

(1)：method：指定 HTTP 哀求方法，如get/post/put/delete/patch等
(2)：url：哀求的 URL 地址，必须提供
(3)：params：URL 查询参数，用于 GET 哀求。将对象转换为 URL 查询字符串
(4)：data：哀求体数据，用于 POST、PUT、PATCH 哀求
(5)：headers：哀求头部，用于设置哀求的元信息，如内容类型、认证信息等
(6)：auth：用于 HTTP 基本认证，包含用户名和密码
(7)：timeout：哀求超时设置，单位为毫秒。超时后哀求将被中止
(8)：responseType：指定响应数据类型，例如JSON/TEXT/BLOB等
(9)：maxRedirects：指定最大重定向次数，默认值是 5
(10)：paramsSerializer：用于自定义查询参数的序列化函数
(11)：paramsSerializer & onDownloadProgress：进度回调，用于处置处罚上传和下载的进度
(12)：withCredentials：指定是否发送跨域哀求时带上凭据（如 Cookies）

5、axios的响应布局

1、then

通常用于处置处罚哀求成功时的情景

axios.get('https://api.example.com/data')
.then(response => {
console.log('Response Data:', response.data);//打印获取到的数据
});

复制代码

2、catch

通常用于处置处罚哀求错误的情景

axios.get('https://api.example.com/data')
.catch(error => {
console.error('Error with request:', error);// 将错误信息输出到控制台
});

复制代码

6、拦截器（在哀求或响应被处置处罚前做修改）（参考官网文档）

简单来说，拦截器就是在你访问某个页面时判断你有没有登录，或者某个页面你有没有权限访问
注意：和守卫的目的不一样，守卫主要用控制路由访问，拦截是访问的拦截实现数据预处置处罚和错误处置处罚
①哀求拦截器

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

复制代码

②响应拦截器

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
// 2xx 范围内的状态码都会触发该函数。
// 对响应数据做点什么
return response;
}, function (error) {
// 超出 2xx 范围的状态码都会触发该函数。
// 对响应错误做点什么
return Promise.reject(error);
});

复制代码

③移除拦截器

const myInterceptor = axios.interceptors.request.use(function () {/*...*/});
axios.interceptors.request.eject(myInterceptor);

复制代码

④给axios实例添加拦截器

const instance = axios.create();
instance.interceptors.request.use(function () {/*...*/});

复制代码

四、axios的简单案例

界面中使用import axios from 'axios';便可将其引入使用

<template>
<div>
<h1>发送 GET 请求示例</h1>
<button @click="sendGetRequest">发送请求</button>
<ul v-if="users.length">
<li v-for="user in users" :key="user.id">
{{ user.name }} - {{ user.email }} - {{ user.role }}
</li>
</ul>
<p v-if="responseMessage">{{ responseMessage }}</p>
</div>
</template>
<script>
import axios from 'axios';
export default {
name: 'GetRequestPage',
data() {
return {
users: [], // 存储从 Mock Server 获取的用户数据
responseMessage: '' // 用于存储请求的响应消息
};
},
methods: {
sendGetRequest() {
axios({
method: 'get',
url: 'https://cf217b11-dea8-41df-8085-f4c3c21e34ea.mock.pstmn.io/UserList'
})
.then(response => {
// 请求成功，处理响应
this.users = response.data.data; // 更新用户数据
this.responseMessage = '请求成功';
})
.catch(error => {
// 请求失败，输出错误信息
this.responseMessage = '请求失败: ' + error.message;
console.error('请求失败:', error);
});
}
}
};
</script>
<style>
/* 可以在这里添加样式 */
</style>

复制代码

五、参考文档

起步 | Axios Docs (axios-http.com)

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/)