Vue封装Axios

最新推荐文章于 2024-03-09 16:58:30 发布

535366

最新推荐文章于 2024-03-09 16:58:30 发布

阅读量277

点赞数 2

文章标签： vue.js javascript ajax

本文链接：https://blog.csdn.net/A535366/article/details/119946239

版权

本文探讨了在Vue项目中封装Axios的原因，包括与后端约定请求头、状态码和超时时间。通过设置接口请求前缀适应不同环境，利用请求和响应拦截器定制业务逻辑，并介绍了如何使用node环境变量区分开发、测试和生产环境。此外，还讲解了在本地使用vue.config.js配置代理解决跨域问题，以及将封装的方法集中管理在api.js文件中，便于维护和调用。

摘要由CSDN通过智能技术生成

1.为什么要封装axios?封装axios

如果每发起⼀次 HTTP 请求，就要把这些⽐如设置超时时间、设置请求头、根据

项⽬环境判断使⽤哪个请求地址、错误处理等等操作，都需要写⼀遍

这种重复劳动不仅浪费时间，⽽且让代码变得冗余不堪，难以维护。为了提⾼我们的代码质量，我们应该在项⽬中⼆次封装⼀下 axios 再使⽤

axios是单立模式因为每一次请求都需要用到这个axios

首先安装axios-S到生产环境里，

为什么要安装到生产环境里，

因为安装到生产环境里开发环境也可以使用但是生产环境里面开发环境不可以使用，最后在min.js中导入

举个简单个栗子：

axios("http://localhost:3000/data", {
  // 配置代码
  method: "GET",
  timeout: 1000,
  withCredentials: true,
  headers: {
    "Content-Type": "application/json",
    Authorization: "xxx",
  },
  transformRequest: [
    function(data, headers) {
      return data;
    },
  ], // 其他请求配置...
}).then(
  (data) => {
    // todo: 真正业务逻辑代码
    console.log(data);
  },
  (err) => {
    // 错误处理代码
    if (err.response.status === 401) {
      // handle authorization error
    }
    if (err.response.status === 403) {
      // handle server forbidden error
    } // 其他错误处理.....
    console.log(err);
  }
);

如果每个⻚⾯都发送类似的请求，都要写⼀堆的配置与错误处理，就显得过于繁琐了

这时候我们就需要对 axios 进⾏⼆次封装，让使⽤更为便利

⼀、如何封装