Axios

怀念夏天  金牌会员 | 2024-6-22 12:58:54 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 807|帖子 807|积分 2421

一文了解Axios

1. Axios的弁言

  1. # axios的引言
  2.         Axios 是一个  异步请求 技术
  4. # 异步请求
  5.         基于XMLHttpRequest对象发起的请求都是异步请求
  7. # 异步请求特点
  8.         请求之后页面不动,响应回来更新的是页面的局部,多个请求之间互不影响,并行执行
  9.         ajax确实用来发送异步请求,ajax过气  
  10.         系统架构 前后端分离架构系统   ---- 异步请求技术 ----->   Vue 全家桶系列 前端技术端  Vue  淘汰了jQuery  
复制代码
2. Axios基本入门

2.1 下载Axios

下载地点: https://unpkg.com/axios/dist/axios.min.js
2.2 Axios的案例

2.2.1 GET方式请求

  1.                 <!--引入axios的相关依赖-->
  2.     <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  3.     <script>
  4.         //get方式请求
  5.         axios.get('http://localhost:8888/axios/findAll?username=zhangsan&password=123')//发送请求的url
  6.             .then(function(response){
  7.                 console.log(response.data);
  8.             })//响应回来触发的回调函数
  9.             .catch(function(err){ //当请求出现错误时回调函数
  10.                 console.log(err);
  11.             });
  12.     </script>
复制代码
2.2.2 POST方式的请求

  1. <!--引入axios的相关依赖-->
  2.     <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  3.     <script>
  4.         //post请求
  5.         axios.post('http://localhost:8888/axios/save',{name:"zhangsan",age:23}).then(function (response) {
  6.             console.log(response.data);
  7.         }).catch(function (err) {
  8.             console.log(err);
  9.         });
  10.     </script>
复制代码
  1. # 总结
  2.                 1. axios在发送post方式的请求时传递的参数如果为对象类型,axios会自动将对象转为json格式的字符串使用 application/json的请求头向后端服务接口传递参数
  3.                 2. axios的post请求传递参数的两种方式:
  4.                                 第一种使用字符串进行参数传递:                                                                                                 "name=zhangsan&age=23" 这种形式
  5.                                 第二种方式后端接口直接使用@RequestBody注解形式接收参数:
复制代码
3. Axios的并发请求

   并发请求: 在同一时间发送多个不同的请求到后端服务,最后同一处理不同服务的响应结果
  1.     <!--引入axios的相关依赖-->
  2.     <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  3.     <script>
  4.         //并发请求: 在同一时间发送多个不同的请求到后端服务,最后同一处理不同服务的响应结果
  5.         function findAll(){
  6.             return axios.get("http://localhost:8888/axios/findAll?username=xiaochen&password=123");
  7.         }
  8.         function save(){
  9.             return axios.post('http://localhost:8888/axios/save',{name:"xiaosun",age:23})
  10.         }
  11.         //并行发送
  12.         axios.all([findAll(),save()]).then(
  13.             axios.spread(function(result1,result2){
  14.                 console.log(result1.data);
  15.                 console.log(result2.data);
  16.             })//用来统一处理多个并发请求的执行结果
  17.         );//all用来处理并发请求
  18.     </script>
复制代码
  1. # 总结
  2.                 1.针对于并发请求需要用到axios.all()函数来完成并发请求的处理
  3.                 2.针对于并发请求的结果汇总需要使用axios.spread()函数来统一汇总请求结果
复制代码
4. Axios的Restful风格的API

  1. # Axios的API总结
  2.   axios.request(config)
  3.   axios.get(url[, config])
  4.   axios.delete(url[, config])
  5.   axios.head(url[, config])
  6.   axios.post(url[, data[, config]])
  7.   axios.put(url[, data[, config]])
  8.   axios.patch(url[, data[, config]])
  10.   NOTE:
  11.                 在使用别名方法时， url、method、data 这些属性都不必在配置中指定。
复制代码
  .get(url[, config])、.post(url[, data[, config]])这样的别名方法时，参数的含义略有不同：
  

  • url: 目的地点。
  • data: （对于.post(), .put(), .patch()等）指请求体的数据。
  • config: （可选）额外的配置项，覆盖或增补默认配置。在别名方法中，你不必显式指定method，因为方法名已经确定了HTTP方法范例。包括：
     

  • url: 必需。一个字符串，表现请求的目的地点（URL）。
  • method: 可选。一个字符串，表现HTTP请求方法，如GET, POST, PUT, DELETE等。假如使用.get(), .post()等别名方法，则此属性不需要手动指定，因为它由方法名称隐含。
  • data: 可选。请求体的数据。在POST, PUT, 和PATCH请求中通常用于发送数据到服务器。可以是对象、数组、字符串等，具体格式取决于Content-Type。
  • headers: 可选。一个对象，包罗请求头信息。比方，可以设置{'Content-Type': 'application/json'}来指定发送JSON格式的数据。
  • params: 可选。一个对象或URLSearchParams对象，包罗URL查询字符串的键值对。这对于GET请求特别有效，用于传递查询参数。
  • timeout: 可选。设置请求超时时间（毫秒）。假如请求时间高出这个值，请求会被中断并抛出错误。
    留意：config对象可以包罗url属性来指定请求的URL，但是单独提供url参数的目的是为了简化调用和进步代码的可读性
  5.Axios的高级使用配置对象

1.全局 axios 默认值:像家里的默认规则

想象一下，你家里有一些默认的生存规则，好比晚上10点以后要保持安静。在Axios中，全局默认配置就像是这些家规，它们会影响到所有的网络请求。
  1. // 设置一个大家都要遵守的基地地址
  2. axios.defaults.baseURL = 'https://api.example.com';
  3. // 给所有请求加一个通行令牌，就像出门都需要带的钥匙
  4. axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
  5. // 对于发送POST请求，我们统一规定用什么样的包装纸（Content-Type）
  6. axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
复制代码
2.自界说实例默认值:特定房间的特别规则

现在，假设你家里有一个书房，内里有些特别的规矩，好比必须穿拖鞋进入。在Axios中，你可以创建一个自界说的实例，它有自己的默认配置，就像书房的特别规则。
  1. // 创建实例时配置默认值
  2. const instance = axios.create({
  3.   baseURL: 'https://api.example.com'
  4. });
  6. // 创建实例后修改默认值
  7. instance.defaults.headers.common['Authorization'] = AUTH_TOKEN;
复制代码
  1. // 创建一个新助手（实例），并告诉他我们的基地地址
  2. const 我的专属助手 = axios.create({
  3.   baseURL: 'https://api.mycoolproject.com'
  4. });
  5. // 给这个助手也配一把特别的钥匙
  6. 我的专属助手.defaults.headers.common['Authorization'] = '我的书房钥匙';
  7. // 即使后来发现需要调整规则，比如换一种包装纸，也很容易
  8. 我的专属助手.defaults.headers.post['Content-Type'] = 'application/json';
复制代码
3.配置的优先级

想象你正在构造一次野餐运动，关于野餐的具体安排（好比地点、时间），会有几个泉源的规定：

  • 社区规定：社区有一套默认的野餐规则，好比通常都在公园举行，下战书两点开始。
  • 小组规定：你的小组大概会根据成员的需要调整这些规则，好比改为早上十点在湖边开始。
  • 个人需求：最后，每个加入者的个别需求也会被考虑，好比某人那天只能晚到，所以他的野餐时间会单独调整到下战书三点。
在Axios中，配置的设定也是类似的分层概念，从最通用到最具体：


  • 库的默认配置：就像社区规定，是最基本的设定，实用于所有人但可被覆盖。
  • 实例的默认配置：类似于小组规定，针对特定的一组请求做了定制，覆盖了库的默认设置。
  • 单次请求的配置：这相当于个人需求，是最具体的，只对某一次请求有效，会覆盖前两层的所有设定。
  1. // 使用库提供的默认配置创建实例
  2. // 此时超时配置的默认值是 `0`
  3. const instance = axios.create();
  5. // 重写库的超时默认值
  6. // 现在，所有使用此实例的请求都将等待2.5秒，然后才会超时
  7. instance.defaults.timeout = 2500;
  9. // 重写此请求的超时时间，因为该请求需要很长时间
  10. instance.get('/longRequest', {
  11.   timeout: 5000
  12. });
复制代码

  • 库的默认值：Axios小助手自带了一套默认工作方式，好比默认情况下，它大概不会等待太久就以为请求失败了（超时时间默认是0，表现没有特别设定）。
  • 实例的配置：你可以定制一个特殊的Axios小助手实例，专门用来处理那些大概需要更长时间的使命。好比，你设置了这个实例的超时时间为2.5秒（instance.defaults.timeout = 2500;），这意味着使用这个实例发起的请求会比一样平常的请求更有耐心，愿意多等等看。
  • 单次请求的特殊要求：有时候，即便是这个特殊实例的耐心也不够，好比有个请求（去很远的地方拿特别的食材）明白知道会花更长时间。这时，你可以在发起这个特定请求时单独指定更长的等待时间（timeout: 5000），也就是说，这一次请求会等待5秒钟才以为超时。
4. 配置对象

  1. {
  2.   // `url` 是用于请求的服务器 URL
  3.   url: '/user',
  5.   // `method` 是创建请求时使用的方法
  6.   method: 'get', // 默认是 get
  8.   // `baseURL` 将自动加在 `url` 前面，除非 `url` 是一个绝对 URL。
  9.   // 它可以通过设置一个 `baseURL` 便于为 axios 实例的方法传递相对 URL
  10.   baseURL: 'https://some-domain.com/api/',
  12.   // `transformRequest` 允许在向服务器发送前，修改请求数据
  13.   // 只能用在 'PUT', 'POST' 和 'PATCH' 这几个请求方法
  14.   // 后面数组中的函数必须返回一个字符串，或 ArrayBuffer，或 Stream
  15.   transformRequest: [function (data) {
  16.     // 对 data 进行任意转换处理
  18.     return data;
  19.   }],
  21.   // `transformResponse` 在传递给 then/catch 前，允许修改响应数据
  22.   transformResponse: [function (data) {
  23.     // 对 data 进行任意转换处理
  25.     return data;
  26.   }],
  28.   // `headers` 是即将被发送的自定义请求头
  29.   headers: {'X-Requested-With': 'XMLHttpRequest'},
  31.   // `params` 是即将与请求一起发送的 URL 参数
  32.   // 必须是一个无格式对象(plain object)或 URLSearchParams 对象
  33.   params: {
  34.     ID: 12345
  35.   },
  37.   // `paramsSerializer` 是一个负责 `params` 序列化的函数
  38.   // (e.g. https://www.npmjs.com/package/qs, http://api.jquery.com/jquery.param/)
  39.   paramsSerializer: function(params) {
  40.     return Qs.stringify(params, {arrayFormat: 'brackets'})
  41.   },
  43.   // `data` 是作为请求主体被发送的数据
  44.   // 只适用于这些请求方法 'PUT', 'POST', 和 'PATCH'
  45.   // 在没有设置 `transformRequest` 时，必须是以下类型之一：
  46.   // - string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams
  47.   // - 浏览器专属：FormData, File, Blob
  48.   // - Node 专属： Stream
  49.   data: {
  50.     firstName: 'Fred'
  51.   },
  53.   // `timeout` 指定请求超时的毫秒数(0 表示无超时时间)
  54.   // 如果请求话费了超过 `timeout` 的时间，请求将被中断
  55.   timeout: 1000,
  57.   // `withCredentials` 表示跨域请求时是否需要使用凭证
  58.   withCredentials: false, // 默认的
  60.   // `adapter` 允许自定义处理请求，以使测试更轻松
  61.   // 返回一个 promise 并应用一个有效的响应 (查阅 [response docs](#response-api)).
  62.   adapter: function (config) {
  63.     /* ... */
  64.   },
  66.   // `auth` 表示应该使用 HTTP 基础验证，并提供凭据
  67.   // 这将设置一个 `Authorization` 头，覆写掉现有的任意使用 `headers` 设置的自定义 `Authorization`头
  68.   auth: {
  69.     username: 'janedoe',
  70.     password: 's00pers3cret'
  71.   },
  73.   // `responseType` 表示服务器响应的数据类型，可以是 'arraybuffer', 'blob', 'document', 'json', 'text', 'stream'
  74.   responseType: 'json', // 默认的
  76.   // `xsrfCookieName` 是用作 xsrf token 的值的cookie的名称
  77.   xsrfCookieName: 'XSRF-TOKEN', // default
  79.   // `xsrfHeaderName` 是承载 xsrf token 的值的 HTTP 头的名称
  80.   xsrfHeaderName: 'X-XSRF-TOKEN', // 默认的
  82.   // `onUploadProgress` 允许为上传处理进度事件
  83.   onUploadProgress: function (progressEvent) {
  84.     // 对原生进度事件的处理
  85.   },
  87.   // `onDownloadProgress` 允许为下载处理进度事件
  88.   onDownloadProgress: function (progressEvent) {
  89.     // 对原生进度事件的处理
  90.   },
  92.   // `maxContentLength` 定义允许的响应内容的最大尺寸
  93.   maxContentLength: 2000,
  95.   // `validateStatus` 定义对于给定的HTTP 响应状态码是 resolve 或 reject  promise 。如果 `validateStatus` 返回 `true` (或者设置为 `null` 或 `undefined`)，promise 将被 resolve; 否则，promise 将被 rejecte
  96.   validateStatus: function (status) {
  97.     return status >= 200 && status < 300; // 默认的
  98.   },
  100.   // `maxRedirects` 定义在 node.js 中 follow 的最大重定向数目
  101.   // 如果设置为0，将不会 follow 任何重定向
  102.   maxRedirects: 5, // 默认的
  104.   // `httpAgent` 和 `httpsAgent` 分别在 node.js 中用于定义在执行 http 和 https 时使用的自定义代理。允许像这样配置选项：
  105.   // `keepAlive` 默认没有启用
  106.   httpAgent: new http.Agent({ keepAlive: true }),
  107.   httpsAgent: new https.Agent({ keepAlive: true }),
  109.   // 'proxy' 定义代理服务器的主机名称和端口
  110.   // `auth` 表示 HTTP 基础验证应当用于连接代理，并提供凭据
  111.   // 这将会设置一个 `Proxy-Authorization` 头，覆写掉已有的通过使用 `header` 设置的自定义 `Proxy-Authorization` 头。
  112.   proxy: {
  113.     host: '127.0.0.1',
  114.     port: 9000,
  115.     auth: : {
  116.       username: 'mikeymike',
  117.       password: 'rapunz3l'
  118.     }
  119.   },
  121.   // `cancelToken` 指定用于取消请求的 cancel token
  122.   // （查看后面的 Cancellation 这节了解更多）
  123.   cancelToken: new CancelToken(function (cancel) {
  124.   })
  125. }
复制代码
5.使用配置对象情势发送请求

  1. var instance = axios.create({
  2.    method:"GET",
  3.    baseURL:"http://localhost:8888",
  4.    data:{  //作为请求体发送的数据,只适用于这些请求方法 'PUT', 'POST', 和 'PATCH'
  6.    }
  7. });
  9. instance.get("/axios/findAll?username=zhangsan");
复制代码
固然可以，让我们用更简单易懂的方式表明Axios中的错误处理机制，并联合代码示例。
6.错误处理

想象一下，你派了个小信使（axios）去城堡（服务器）取信（数据）。路上大概会发生各种情况，好比城堡拒绝给信、信使迷路了大概信使根本没出发。我们就要为这些情况做好准备。
1.基本错误捕获

  1. axios.get('/user/12345')  // 尝试去获取编号12345的用户信息
  2.   .catch(function (error) {  // 如果路上出了问题，就执行这里的代码
  3.     // 分三种情况讨论：
  4.    
  5.     // 1. 城堡回复了，但说“不行”（状态码不是200系列）
  6.     if (error.response) {
  7.       console.log("城堡的回复是:", error.response.data);
  8.       console.log("回复的详细状态:", error.response.status);
  9.       console.log("回复里还有什么:", error.response.headers);
  10.     }
  11.    
  12.     // 2. 信使出发了，但没收到城堡任何回复（可能是网络断了）
  13.     else if (error.request) {
  14.       console.log("信使出发了，但没带回任何城堡的消息", error.request);
  15.     }
  16.    
  17.     // 3. 信使根本就没出发（配置错误之类的）
  18.     else {
  19.       console.log("哎呀，信使都没出发呢！", error.message);
  20.     }
  21.    
  22.     // 总之，打印出这次任务的完整配置，方便查找问题
  23.     console.log("任务的原始计划是这样的:", error.config);
  24.   });
复制代码
2.自界说错误判定：validateStatus

有时候，你大概以为城堡回复“400”之类的也不算大问题，还想继承处理。这就用到validateStatus了。
  1. axios.get('/user/12345', {
  2.   validateStatus: function (status) {  // 自定义规则：只要状态码不到500，就算成功
  3.     return status < 500;
  4.   }
  5. })
复制代码
3.获取错误详情：toJSON

假如想深入了解错误的全貌，可以用toJSON方法。
  1. axios.get('/user/12345')
  2.   .catch(function (error) {
  3.     console.log("错误的全部细节:", error.toJSON());
  4.   });
复制代码
  总结：错误处理就是为你的网络请求之旅准备应对各种不测的方案。无论是城堡拒绝（状态码非常）、信使迷路（请求发出但无响应），还是信使压根没出发（请求配置出错），我们都要有所准备，确保即使碰到问题也能妥善处理。通过自界说错误判定和获取详细错误信息，我们可以更灵活、过细地处理这些情况。
  7.拦截器

固然可以，让我们用更简单直白的语言来表明一下Axios中的拦截器是什么以及怎样使用它们。
1.什么是拦截器？

想象一下，你寄了一个信（请求）大概收到了一个包裹（响应），拦截器就像是你家门前的信箱保安。它可以在你的信件出去之前查抄一遍，也可以在收到包裹之后先打开看看。在 Axios 中，拦截器就是这样的“保安”，它答应你在请求发送到服务器前或从服务器吸收到响应后执行一些操作。
2.请求拦截器

用途： 在请求真正飞往服务器之前，你可以用它来做一些事变，好比自动给每个请求加上身份验证信息、处理请求参数等。
  1. axios.interceptors.request.use(function (config) {
  2.   // 这里是在请求发送前做的事情
  3.   console.log('请求即将发出，我来检查一下...');
  4.   
  5.   // 比如，添加一个token到请求头中
  6.   if(localStorage.token) {
  7.     config.headers.Authorization = `Bearer ${localStorage.token}`;
  8.   }
  9.   
  10.   // 最后记得返回修改后的配置信息
  11.   return config;
  12. }, function (error) {
  13.   // 如果请求准备过程中出错了，这里可以捕获错误并处理
  14.   console.error('哎呀，请求还没发就出错了:', error);
  15.   // 记得把错误继续抛出，不然请求就被你拦下了
  16.   return Promise.reject(error);
  17. });
复制代码
扩充（小白看过来）：
Promise.reject(error) 的含义：
在JavaScript中，Promise是一种处理异步操作的方法，它有两种结果：成功（resolved）和失败（rejected）。当我们用.then处理成功的情况，用.catch处理失败的情况。
Promise.reject(error)的作用是创建一个已经被标记为失败（rejected）的Promise对象，并且这个失败的原因是error。换句话说，就是在告诉接下来的.catch处理步调：“嘿，出错了，错误信息在这里。”
在拦截器中使用它，是为了包管错误能够被精确的传递和处理。假如不使用Promise.reject(error)，错误就会被拦截器吞掉，外部调用者就不知道请求或响应处理过程中出现了问题。
例子简化阐明


  • 请求拦截器里用了Promise.reject(error)，是因为假如在准备请求时出错（好比配置错误），你需要把这个错误告知调用者，让他们能在.catch中处理这个错误。
  • 响应拦截器中同样使用，意味着假如对响应的处理出了问题（好比盼望的格式不符），也要通过抛出这个错误，确保外部调用者能够感知并处理。
3.响应拦截器

用途： 当服务器的响应回来时，拦截器可以先一步吸收，这样你就可以在数据到达应用的其他部分之前举行处理，好比解析数据、统一处理错误信息等。
  1. axios.interceptors.response.use(function (response) {
  2.   // 响应成功到达，这里可以先看看
  3.   console.log('收到响应了，让我先瞧瞧...');
  4.   
  5.   // 可以直接返回数据部分，让使用更方便
  6.   return response.data;
  7. }, function (error) {
  8.   // 如果服务器返回了错误状态码，这里可以捕获并统一处理
  9.   console.error('服务器好像不太高兴，给了我一个错误:', error.response.status);
  10.   
  11.   // 根据错误类型，你可以自定义错误处理逻辑，比如提示用户
  12.   if(error.response.status === 401) {
  13.     alert('登录过期了，请重新登录！');
  14.   }
  15.   
  16.   // 别忘了返回错误，以便调用处能知道并处理
  17.   return Promise.reject(error);
  18. });
复制代码
4.移除拦截器

假如某个时候你不再需要某个拦截器了，可以这样移除它：
  1. // 先保存拦截器的引用
  2. const myRequestInterceptor = axios.interceptors.request.use(/*...*/);
  4. // 等到需要的时候
  5. axios.interceptors.request.eject(myRequestInterceptor);
复制代码
5.给自界说实例添加拦截器

假如你创建了自己的Axios实例，也可以为这个特定的实例单独设置拦截器，这样不会影响到全局的Axios配置。
  1. const myInstance = axios.create();
  3. // 为这个实例添加请求拦截器
  4. myInstance.interceptors.request.use(function (config) {
  5.   // 特定于这个实例的处理逻辑
  6.   return config;
  7. });
  9. // 使用这个实例发送请求，将使用上面定义的拦截器
  10. myInstance.get('/some-url');
复制代码
8.取消请求

1.取消请求就像挂断电话一样简单

想象一下，你正在用手机打电话查询电影票，但突然决定不看了。这时，你就会挂断电话，制止与电影院的通话。在互联网世界里，当你向网站发送请求获取数据时，有时候你也大概需要“挂断”这个请求，这就是“取消请求”。
Axios，一个常用的网络请求库，提供了两种方式让你能优雅地“挂断”请求：AbortController 和 CancelToken。不外要留意，从Axios的一个较新版本开始，推荐使用AbortController，而CancelToken已颠末时了。
2.使用AbortController（推荐）

想象AbortController是一个遥控器，可以随时制止你的请求使命。

  • 准备遥控器：
    1. const controller = new AbortController();
    复制代码
  • 发起请求，并给它配上遥控器：
    1. axios.get('/get-movie-times', {
    2.   signal: controller.signal // 这就是告诉请求，用哪个遥控器控制
    3. }).then(...).catch(...);
    复制代码
  • 想取消请求时，按下遥控器的按钮：
    1. controller.abort(); // 请求就被取消了
    复制代码
3.使用CancelToken（已过时，只管别用）

只管不推荐新项目使用，但了解一下也无妨。想象CancelToken是一张可以撕毁的门票，一旦撕了，就进不了电影院了。

  • 制作可撕毁的门票：
    1. const CancelToken = axios.CancelToken;
    2. const source = CancelToken.source(); // 这个source就像是门票和撕票机的组合
    复制代码
  • 买票（发起请求），并带上可撕的门票：
    1. axios.get('/buy-ticket', {
    2.   cancelToken: source.token
    3. }).then(...).catch(...);
    复制代码
  • 不想看电影了？撕掉门票！：
    1. source.cancel('改变主意，不看电影了。');
    复制代码
小贴士：


  • 你可以用同一个遥控器（AbortController）或门票（CancelToken）控制多个请求。
  • 假如你同时知道这两种方法，也没问题，在过渡阶段两者可以混用，但记得优先考虑新的、更现代的方法——AbortController。
   简单来说，就是准备一个控制工具，然后在请求时告诉它，假如需要，就用这个工具来制止请求。
  9.axios的二次封装

固然可以，让我们一起来探讨怎样对Axios举行二次封装，这个过程不仅适合编程新手理解，也能为经验丰富的开发者提供一些实用的看法。Axios 是一个基于 promise 的 HTTP 库，它在前端开发中被广泛用于发送 AJAX 请求。二次封装的目的是为了进步代码的可维护性、可读性和灵活性，好比统一处理错误、添加请求拦截器、响应拦截器等。
1.为什么需要封装 Axios


  • 统一错误处理：制止在每个请求中重复编写错误处理逻辑。
  • 请求拦截与响应拦截：在请求发送前和响应吸收后执行某些操作，如自动添加 Token、处理返回状态码等。
  • 配置默认值：如设置默认的基础URL、超时时间等。
  • 简化API调用：通过自界说方法让API调用更简洁明白。
2.准备工作

确保你的项目中已经安装了Axios库。假如没有安装，可以通过npm或yarn来安装：
  1. npm install axios
  2. # 或者
  3. yarn add axios
复制代码
3.开始封装

1. 创建封装文件

起首，在你的项目中创建一个名为http.js（或你偏好的定名）的文件，这将是我们的封装起点。
2. 基础封装

在http.js中，我们起首引入Axios，并界说基本的配置项。
  1. import axios from 'axios';
  3. // 设置基础URL和超时时间
  4. const service = axios.create({
  5.   baseURL: process.env.VUE_APP_BASE_API, // 根据环境变量获取基础URL
  6.   timeout: 5000, // 请求超时时间
  7. });
  9. export default service;
复制代码
3. 错误处理

接下来，我们来实现错误的统一处理。这包括网络错误、服务器错误等。
  1. service.interceptors.response.use(
  2.   response => {
  3.     // 对响应数据做处理，这里可以根据实际需求定制
  4.     return response.data;
  5.   },
  6.   error => {
  7.     console.error('请求出错:', error);
  8.     if (error.response) {
  9.       // 请求已发出，但服务器响应的状态码不在 2xx 范围内
  10.       const { status, data } = error.response;
  11.       // 根据不同的错误码做相应处理
  12.       switch (status) {
  13.         case 401:
  14.           // 处理未授权的情况
  15.           break;
  16.         case 403:
  17.           // 处理无权限的情况
  18.           break;
  19.         case 404:
  20.           // 处理资源不存在的情况
  21.           break;
  22.         default:
  23.           // 其他错误处理
  24.           break;
  25.       }
  26.     } else if (error.request) {
  27.       // 请求发出了，但没有收到响应
  28.       console.error('请求已发出，但没有收到响应');
  29.     } else {
  30.       // 发生了一些问题，导致请求未能发出
  31.       console.error('请求配置存在问题');
  32.     }
  33.     return Promise.reject(error);
  34.   }
  35. );
复制代码
4. 请求拦截器

在请求发送前，我们大概需要做一些预处理，如添加认证信息。
  1. service.interceptors.request.use(config => {
  2.   // 在发送请求之前做些什么，例如添加Token
  3.   const token = localStorage.getItem('token');
  4.   if (token) {
  5.     config.headers.Authorization = `Bearer ${token}`;
  6.   }
  7.   return config;
  8. }, error => {
  9.   // 请求错误处理
  10.   return Promise.reject(error);
  11. });
复制代码
5. 导出封装好的服务

确保你的封装结果能被其他模块使用。
  1. export default service;
复制代码
6.怎样使用封装后的Axios

在你的应用中，你可以像这样使用封装后的Axios实例：
  1. import http from './http';
  3. http.get('/api/data')
  4.   .then(response => {
  5.     console.log('成功获取数据:', response);
  6.   })
  7.   .catch(error => {
  8.     console.error('请求失败:', error);
  9.   });
复制代码
10.API模块化

API模块化：提升项目布局的清晰度与可维护性
API模块化是将应用步调中的所有API请求按照功能大概业务模块举行分类构造的一种设计模式。这样做不仅可以让代码布局更加清晰，便于团队协作，还能显著提升项目的可维护性和扩展性。下面我们将详细介绍怎样举行API模块化，同时对比它与Axios基本封装的区别。
1.为什么需要API模块化


  • 清晰的代码布局：将API按模块划分，使得干系功能的代码聚集在一起，易于查找和管理。
  • 便于团队协作：每个成员可以专注于自己负责的模块，淘汰代码辩论。
  • 易于维护和扩展：随着项目发展，新功能的参加或旧功能的调整更加灵活方便。
  • 重用和尺度化：重复使用的API调用可以封装成通用方法，淘汰代码重复，进步代码质量。
2.API模块化的步骤

以Vue.js项目为例，假设我们正在开发一个包罗用户管理和文章管理的Web应用。

  • 创建API目次
在项目的src目次下创建一个名为api的文件夹，用于存放所有API模块。

  • 划分模块并创建文件
在api目次下，根据业务模块创建相应的JS文件，如user.js和article.js。
  1. src/
  2. └── api/
  3.     ├── user.js
  4.     └── article.js
复制代码

  • 编写API模块
以user.js为例，我们在这里封装与用户干系的所有API请求。
  1. // src/api/user.js
  2. import http from '../http'; // 引入我们之前封装的axios实例
  4. export function login(data) {
  5.   return http.post('/user/login', data);
  6. }
  8. export function getUserInfo(userId) {
  9.   return http.get(`/user/${userId}`);
  10. }
  12. // ...其他用户相关API
复制代码
同理，在article.js中封装文章干系的API。
   留意：
  , data后面跟着的data就是你要发送给服务器的数据。在这个例子中，data大概包罗了用户的登录信息，好比用户名和暗码。就像你准备了一份礼品（数据），通过POST请求这个“快递员”送到服务器指定的房间（/user/login）。
  具体过程
  

  • 准备阶段：你通过login({ username: 'test', password: 'test' })调用，创建了一个包罗用户名和暗码的对象。
  • 打包礼品：这个对象（礼品）被看成data参数，准备通过POST请求发送。
  • 发起请求：http.post('/user/login', data)这行代码就像发送指令，“请把这份包罗用户名和暗码的礼品送到/user/login这个房间。”
  • 服务器响应：服务器收到请求后，会处理这些数据（好比验证用户名和暗码是否精确），然后返回一个响应，告诉客户端（你的应用）登录是否成功。
  • 处理结果：在你的代码中，通常会在.then()或.catch()中处理服务器的响应，也就是判定登录是否成功，并做出相应的操作，好比跳转页面或表现错误信息。
  

  • 在应用中使用
现在，你可以在任何需要的地方直接导入并使用这些API。
  1. import { login } from '@/api/user';
  2. import { getArticleList } from '@/api/article';
  4. login({ username: 'test', password: 'test' })
  5.   .then(response => {
  6.     console.log('登录成功', response);
  7.     getArticleList()
  8.       .then(articleList => console.log('文章列表', articleList))
  9.       .catch(err => console.error('获取文章列表失败', err));
  10.   })
  11.   .catch(error => console.error('登录失败', error));
复制代码
3.API模块化与Axios封装的区别



  • 目的不同：

    • Axios封装重要关注于对HTTP请求的低层抽象，如全局错误处理、请求/响应拦截、默认配置等，旨在简化单个请求的使用。
    • API模块化则是在Axios封装的基础上，进一步对业务逻辑层面的请求举行构造和管理，强调的是代码布局和团队协作的优化。

  • 条理不同：

    • Axios封装属于技能基础办法层，是所有网络请求的基础。
    • API模块化则更偏向于业务逻辑层，它直接服务于特定的业务功能。

  • 作用范围不同：

    • Axios封装影响整个项目的所有网络请求举动。
    • API模块化则仅限于其所属的业务模块，有助于保持代码的高内聚、低耦合。


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

使用道具 举报

0 个回复

倒序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

怀念夏天

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

楼主热帖

标签云

挺好的 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表