vue项目中关于axios的二次封装

本文介绍如何在Vue项目中封装Axios以实现统一处理请求数据、加载提示等功能,并提供了具体的代码实现。

vue项目开发时,为了对请求的数据做统一处理,如加loading,以及请求消息提示提示等,需要对vue配套的axios进行二次封装

//引入axios
import axios from 'axios'
// 使用element-ui Message做消息提醒
import { Message } from 'element-ui';
// 设置baseURL
//axios.defaults.baseURL = '/api'
//设置默认请求头
axios.defaults.headers = {
	'X-Requested-With': 'XMLHttpRequest'
}
// 设置请求过期时间
axios.defaults.timeout = 10000

//请求拦截器
axios.interceptors.request.use(config => {

	config.headers = {
		'Content-Type': 'application/json'
	}
	// 配置token
	// if(token){
	//   config.token = {'token':token}
	// }
	return config
}, error => {
	return Promise.reject(error)
})

//响应拦截器即异常处理
axios.interceptors.response.use(response => {
    // 根据后端接口code执行操作
	switch(response.data.code) {
		//处理共有的操作
	}

	//Message.error(err.message)

	return response
}, error => {
	if(error && err.response) {
		switch(err.response.status) {
			case 400:
				err.message = '错误请求'
				break;
			case 401:
				err.message = '未授权,请重新登录'
				break;
			case 403:
				err.message = '拒绝访问'
				break;
			case 404:
				err.message = '请求错误,未找到该资源'
				break;
			case 405:
				err.message = '请求方法未允许'
				break;
			case 408:
				err.message = '请求超时'
				break;
			case 500:
				err.message = '服务器端出错'
				break;
			case 501:
				err.message = '网络未实现'
				break;
			case 502:
				err.message = '网络错误'
				break;
			case 503:
				err.message = '服务不可用'
				break;
			case 504:
				err.message = '网络超时'
				break;
			case 505:
				err.message = 'http版本不支持该请求'
				break;
			default:
				err.message = `连接错误${err.response.status}`
		}
	} else {
		err.message = "连接到服务器失败"
	}
	Message.error(err.message)
	return Promise.resolve(error.response)
})

export default {
	// get请求
  get (url, param = {}) {
    return new Promise((resolve, reject) => {
      axios.get(url,{params:param})
      	.then(res => {
         resolve(res)
      }, err => {
          reject(err)
      })
    })
  },
  // post请求
  post (url, param = {}) {
    return new Promise((resolve, reject) => {
      axios.post(
       
        url,
        param
      ).then(res => {
        resolve(res)
      }, err => {
          reject(err)
      })
    })
  },
  // put请求
  put (url, param = {}) {
    return new Promise((resolve, reject) => {
      axios.put(url, param)
        .then(response => {
          resolve(response)
        }, err => {
          reject(err)
        })
    })
  },
  // delete
  delete (url,param = {}){
  	return new Promise((resolve, reject) => {
      axios.delete(url, param)
        .then(response => {
          resolve(response)
        }, err => {
          reject(err)
        })
    })
  }
}
// 以上代码的使用需要支持es6


Vue 3.0 中,对 `axios` 进行二次封装是一种常见的实践,旨在提升代码的可维护性、复用性以及统一处理请求和响应逻辑。与 Vue 2.x 不同,Vue 3.0 更倾向于模块化和组合式 API 的使用方式,因此推荐在需要使用的组件中按需引入封装好的模块,而不是直接挂载到全局。 ### 封装步骤 #### 1. 安装 axios 首先,在项目中安装 `axios`: ```bash npm install --save axios ``` #### 2. 创建封装文件 在项目中创建一个专门的文件夹(如 `http` 或 `api`),并在其中创建 `api.js` 或 `request.js` 文件用于封装 `axios`。 ```javascript // http/request.js import axios from 'axios'; // 创建 axios 实例 const instance = axios.create({ baseURL: 'https://api.example.com', // 设置基础 URL timeout: 5000, // 请求超时时间 }); // 请求拦截器 instance.interceptors.request.use( (config) => { // 在发送请求之前做些什么,例如添加 token const token = localStorage.getItem('token'); if (token) { config.headers['Authorization'] = `Bearer ${token}`; } return config; }, (error) => { // 处理请求错误 return Promise.reject(error); } ); // 响应拦截器 instance.interceptors.response.use( (response) => { // 对响应数据做些什么 return response.data; // 直接返回数据体 }, (error) => { // 处理响应错误 if (error.response) { switch (error.response.status) { case 401: // 处理未授权的情况 break; case 404: // 处理找不到资源的情况 break; default: // 其他错误处理 } } return Promise.reject(error); } ); // 封装 GET 请求 export function get(url, params = {}) { return instance.get(url, { params }); } // 封装 POST 请求 export function post(url, data = {}) { return instance.post(url, data); } // 导出实例 export default instance; ``` #### 3. 在组件中使用封装后的 axios 在需要调用接口的组件中,按需引入封装好的方法: ```vue <script setup> import { get, post } from '@/http/request'; const fetchData = async () => { try { const res = await get('/some-endpoint', { param: 'value' }); console.log(res); } catch (error) { console.error('请求失败:', error); } }; const postData = async () => { try { const res = await post('/another-endpoint', { data: 'test' }); console.log(res); } catch (error) { console.error('请求失败:', error); } }; </script> ``` #### 4. 接口集中管理(可选) 为了更好地维护 API 接口,可以将所有接口统一管理在一个文件中: ```javascript // api/index.js import { get, post } from '@/http/request'; export const navBarListApi = (params) => get('/nav-bar-list', params); export const loginApi = (data) => post('/login', data); ``` 然后在组件中使用: ```vue <script setup> import { navBarListApi } from '@/api/index'; const init = async () => { const res = await navBarListApi({ /* 参数 */ }); console.log(res); }; </script> ``` ### 优势 - **统一处理请求和响应**:通过拦截器统一处理请求头、错误提示、token 管理等逻辑。 - **提高可维护性**:将接口集中管理,便于后期维护和修改。 - **提升代码复用性**:避免在多个组件中重复编写相同的请求逻辑。 这种方法适用于大多数 Vue 3 项目,尤其是使用组合式 API 和 `<script setup>` 语法的项目。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值