大号在练葵花宝典 发表于 2024-9-9 03:54:10

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的安装

①新建终端

https://i-blog.csdnimg.cn/direct/6e5f4959c3d844eaa5942a91748b503a.png
②输入下令"npm install axios"安装axios

https://i-blog.csdnimg.cn/direct/f20470cf8384416dad79dd195e13d017.png
③输出类似以下内容表示安装成功

https://i-blog.csdnimg.cn/direct/9e975e90fbe94ac68b2dd4c71e03ae20.png
也可以用下令检查“npm list axios”
https://i-blog.csdnimg.cn/direct/2cc09264c95f449fb09374ee19276842.png

三、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企服之家,中国第一个企服评测及商务社交产业平台。
页: [1]
查看完整版本: 2024从零开始使用VSCode编程之“axios”