vue 项目中对 axios的封装

最新推荐文章于 2024-07-20 21:05:24 发布

雪爪鸿泥

最新推荐文章于 2024-07-20 21:05:24 发布

阅读量240

点赞数 1

分类专栏： vue

本文链接：https://blog.csdn.net/weixin_39111384/article/details/111859003

版权

本文详细介绍了在Vue项目中为何要对Axios进行封装，包括设置接口请求前缀、请求头、超时时间，以及如何封装请求方法、使用请求和响应拦截器。通过封装，可以减少重复代码，提升代码质量和维护性，使得接口调用更便捷。

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

一、axios 是什么

axios 是一个轻量的 HTTP 客户端。
基于 XMLHttpRequest 服务来执行 HTTP 请求，支持丰富的配置，支持 Promise，支持浏览器端和 Node.js 端。自Vue2.0起，尤大宣布取消对 vue-resource 的官方推荐，转而推荐 axios。现在 axios 已经成为大部分 Vue 开发者的首选

特性：

从浏览器中创建 XMLHttpRequests
从 node.js 创建 http请求
支持 Promise API
拦截请求和响应
转换请求数据和响应数据
取消请求
自动转换JSON 数据
客户端支持防御XSRF

基本使用

安装

npm install axios -s

导入

import axios from 'axios'

发送请求

axios({
   
	url:"",//设置请求地址
	method:"GET", //设置请求的方法
	params:{
     // get请求使用 params 进行参数凭借，如果是 post 请求是 data
		type:"",
		page:1,
		rows:50
	}
}).then(res =>{
   
	// res 是后端返回的数据
	console.log(res)
})

二、为什么要封装

axios 的 API 很友好，你完全可以很轻松地在项目中直接使用。

不过随着项目规模增大，如果每发起一次HTTP请求，就要把这些比如设置超时时间、设置请求头、根据项目环境判断使用哪个请求地址、错误处理等等操作，都需要写一遍。

这种重复劳动不仅浪费时间，而且让代码变得冗余不堪，难以维护。为了提高我们的代码质量，我们应该在项目中二次封装一下 axios 再使用。

举个例子：

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 进行二次封装，让使用更加便利。

三、如何封装

封装的时候，需要和后端进行协调一些约定，比如请求头、状态码、请求超过时间。。。
设置接口请求前缀：根据开发、测试、生产环境的不同，前缀需要加以区分。
请求头：实现一些具体的业务，必须携带一些参数才可以请求。
状态码：根绝接口返回的 status ，来执行不同的业务，需要和后端进行约定。
请求方法：根据 GET、POST 等方法进行一个再次封装，使用起来更加方便。
请求拦截器：根据请求的请求头设定，来决定哪些请求时可以访问的。
响应拦截器：这块就是根据后端`返回来的状态码判定执行不同业务。

设置接口请求前缀

利用node环境变量作为判断，用来区分开发环境和正式环境。

if (process.env.NODE_ENV === 'development') {
   
  axios.defaults.baseURL = 'http://dev.xxx.com'
} else if (process.env.NODE_ENV === 'production') {
   
  axios.defaults