2024从零开始使用VSCode编程之“axios”

打印 上一主题 下一主题

主题 798|帖子 798|积分 2394

目次
一、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获取资源

直接
  1. axios.get('https://cunminbiao/user', {
  2.   params: {
  3.     Name: '张三'
  4.   }
  5. })
  6. .then(response => {
  7.   console.log('Response Data:', response.data); // 处理响应数据
  8. })
  9. .catch(error => {
  10.   console.error('Error with request:', error); // 处理错误
  11. });
复制代码

配置对象
  1. axios({
  2.   method: 'get', // 请求方法
  3.   url: 'https://cunminbiao/userlist', // 请求 URL
  4.   params: { // URL 查询参数
  5.     Name: '张三' // 确保参数名称和服务器期望的格式匹配
  6.   }
  7. })
  8. .then(response => {
  9.   console.log('Response Data:', response.data); // 处理响应数据
  10. })
  11. .catch(error => {
  12.   console.error('Error with request:', error); // 处理错误
  13. });
复制代码
②post创建新资源

直接
  1. axios.post('https://cunminbiao/userlist', {
  2.     firstName: '张',
  3.     lastName: '三'
  4.   })
  5.   .then(response => {
  6.     console.log(response.data);
  7.   })
  8.   .catch(error => {
  9.     console.error('Error posting data:', error);
  10.   });
复制代码
配置对象
  1. const config = {
  2.   method: 'post',
  3.   url: 'https://cunminbiao/userlist',
  4.   data: {
  5.     firstName: '张',
  6.     lastName: '三'
  7.   },
  8.   headers: { 'Content-Type': 'application/json' }
  9. };
  10. axios(config)
  11.   .then(response => {
  12.     console.log(response.data);
  13.   })
  14.   .catch(error => {
  15.     console.error('Error with request:', error);
  16.   });
复制代码
③put更新现有资源

直接
  1. axios.put('https://cunminbiao/user', {
  2.     firstName: '张',
  3.     lastName: '三'
  4.   })
  5.   .then(response => {
  6.     console.log(response.data);
  7.   })
  8.   .catch(error => {
  9.     console.error('Error updating data:', error);
  10.   });
复制代码
配置对象
  1. axios({
  2.   method: 'patch', // 请求方法
  3.   url: 'https://cunminbiao/user', // 请求 URL
  4.   data: { // 请求体中的数据
  5.     firstName: '张'
  6.     lastName: '三'
  7.   },
  8.   headers: { 'Content-Type': 'application/json' } // 请求头
  9. })
  10. .then(response => {
  11.   console.log('Response Data:', response.data); // 处理响应数据
  12. })
  13. .catch(error => {
  14.   console.error('Error with request:', error); // 处理错误
  15. });
复制代码
④Delete删除资源

直接
  1. axios.delete('https://cunminbiao/user/张三')
  2.   .then(response => {
  3.     console.log('Data deleted');
  4.   })
  5.   .catch(error => {
  6.     console.error('Error deleting data:', error);
  7.   });
复制代码
配置对象
  1. axios({
  2.   method: 'delete',
  3.   url: 'https://cunminbiao/user/张三'
  4. })
  5. .then(response => {
  6.   console.log('User deleted:', response.data);
  7. })
  8. .catch(error => {
  9.   console.error('Error with request:', error);
  10. });
复制代码
⑤patch部分更新资源

直接
  1. axios.patch('https://cunminbiao/user/张三', {
  2.     lastName: '四'
  3.   })
  4.   .then(response => {
  5.     console.log(response.data);
  6.   })
  7.   .catch(error => {
  8.     console.error('Error updating data:', error);
  9.   });
复制代码
配置对象
  1. axios({
  2.       method: 'patch', // 请求方法
  3.       url: 'https://cunminbiao/user/张三', // 请求 URL
  4.       data: { // 请求体中的数据
  5.         lastName: '四'//改为张四
  6.       },
  7.       headers: { 'Content-Type': 'application/json' } // 请求头
  8.     })
  9.     .then(response => {
  10.       console.log('Response Data:', response.data); // 处理响应数据
  11.     })
  12.     .catch(error => {
  13.       console.error('Error with request:', error); // 处理错误
  14.     });
复制代码
3、一个较为完备的哀求布局(演示)

  1. axios({
  2.   method: 'get', // 请求方法,如 'get', 'post', 'put', 'delete', 'patch'
  3.   url: 'https://cunminbiao/data', // 请求的 URL 地址
  4.   params: { // URL 查询参数,用于 GET 请求
  5.     key1: 'value1',
  6.     key2: 'value2'
  7.   },
  8.   data: { // 请求体数据,用于 POST、PUT、PATCH 请求
  9.     key1: 'value1',
  10.     key2: 'value2'
  11.   },
  12.   headers: { // 请求头部
  13.     'Content-Type': 'application/json',
  14.     'Authorization': 'Bearer your_token_here'
  15.   },
  16.   auth: { // HTTP 基本认证
  17.     username: 'your_username',
  18.     password: 'your_password'
  19.   },
  20.   timeout: 1000, // 请求超时设置,单位为毫秒
  21.   responseType: 'json', // 响应数据类型,如 'json', 'text', 'blob'
  22.   maxRedirects: 5, // 最大重定向次数
  23.   paramsSerializer: function (params) { // 自定义查询参数的序列化函数
  24.     return Qs.stringify(params, { indices: true });
  25.   },
  26.   onDownloadProgress: function (progressEvent) { // 处理下载进度
  27.     console.log('Download progress:', progressEvent);
  28.   },
  29.   onUploadProgress: function (progressEvent) { // 处理上传进度
  30.     console.log('Upload progress:', progressEvent);
  31.   },
  32.   withCredentials: true // 是否发送跨域请求时带上凭证(如 Cookies)
  33. })
  34. .then(response => {
  35.   console.log('Response Data:', response.data); // 处理响应数据
  36. })
  37. .catch(error => {
  38.   console.error('Error with request:', error); // 处理错误
  39. });
复制代码

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

通常用于处置处罚哀求成功时的情景
  1. axios.get('https://api.example.com/data')
  2.   .then(response => {
  3.     console.log('Response Data:', response.data);//打印获取到的数据
  4.   });
复制代码
2、catch

通常用于处置处罚哀求错误的情景
  1. axios.get('https://api.example.com/data')
  2.   .catch(error => {
  3.     console.error('Error with request:', error);// 将错误信息输出到控制台
  4.   });
复制代码

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

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

  1. // 添加请求拦截器
  2. axios.interceptors.request.use(function (config) {
  3.     // 在发送请求之前做些什么
  4.     return config;
  5.   }, function (error) {
  6.     // 对请求错误做些什么
  7.     return Promise.reject(error);
  8.   });
复制代码
②响应拦截器

  1. // 添加响应拦截器
  2. axios.interceptors.response.use(function (response) {
  3.     // 2xx 范围内的状态码都会触发该函数。
  4.     // 对响应数据做点什么
  5.     return response;
  6.   }, function (error) {
  7.     // 超出 2xx 范围的状态码都会触发该函数。
  8.     // 对响应错误做点什么
  9.     return Promise.reject(error);
  10.   });
复制代码
③移除拦截器

  1. const myInterceptor = axios.interceptors.request.use(function () {/*...*/});
  2. axios.interceptors.request.eject(myInterceptor);
复制代码
 ④给axios实例添加拦截器

  1. const instance = axios.create();
  2. instance.interceptors.request.use(function () {/*...*/});
复制代码

四、axios的简单案例

界面中使用import axios from 'axios';便可将其引入使用
  1. <template>
  2.   <div>
  3.     <h1>发送 GET 请求示例</h1>
  4.     <button @click="sendGetRequest">发送请求</button>
  5.     <ul v-if="users.length">
  6.       <li v-for="user in users" :key="user.id">
  7.         {{ user.name }} - {{ user.email }} - {{ user.role }}
  8.       </li>
  9.     </ul>
  10.     <p v-if="responseMessage">{{ responseMessage }}</p>
  11.   </div>
  12. </template>
  13. <script>
  14. import axios from 'axios';
  15. export default {
  16.   name: 'GetRequestPage',
  17.   data() {
  18.     return {
  19.       users: [],  // 存储从 Mock Server 获取的用户数据
  20.       responseMessage: ''  // 用于存储请求的响应消息
  21.     };
  22.   },
  23.   methods: {
  24.     sendGetRequest() {
  25.       axios({
  26.         method: 'get',
  27.         url: 'https://cf217b11-dea8-41df-8085-f4c3c21e34ea.mock.pstmn.io/UserList'
  28.       })
  29.       .then(response => {
  30.         // 请求成功,处理响应
  31.         this.users = response.data.data;  // 更新用户数据
  32.         this.responseMessage = '请求成功';
  33.       })
  34.       .catch(error => {
  35.         // 请求失败,输出错误信息
  36.         this.responseMessage = '请求失败: ' + error.message;
  37.         console.error('请求失败:', error);
  38.       });
  39.     }
  40.   }
  41. };
  42. </script>
  43. <style>
  44. /* 可以在这里添加样式 */
  45. </style>
复制代码
五、参考文档



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

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

使用道具 举报

0 个回复

倒序浏览

快速回复

您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

大号在练葵花宝典

金牌会员
这个人很懒什么都没写!

标签云

快速回复 返回顶部 返回列表