vue封装axios请求(2)

最新推荐文章于 2024-08-08 11:02:08 发布

清辞lzz

最新推荐文章于 2024-08-08 11:02:08 发布

阅读量101

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/weixin_44121503/article/details/114836825

版权

本文详细探讨了在Vue项目中如何进行axios的封装，以提高代码复用性和请求处理效率。通过创建axios实例，设置默认配置，处理响应拦截器和错误处理，实现了优雅的API调用管理。

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

axios封装

1、创建 requset.js

// 引入axios
import axios from 'axios'

// 创建axios实例
const service = axios.create({
  baseURL: 'http://xxx.xxx.xxx/api/', // baseURL
  timeout: 15000 // 请求超时的时间
})

// 请求拦截器
service.interceptors.request.use(config => {
  // 添加token
  config.headers['token'] = localStorage.getItem('token')
  return config
}, error => {
  console.log(error) // for debug
  return Promise.reject(error)
})

// 响应拦截器
service.interceptors.response.use(response => {
  if (response.data.code !== 200) {
  	// 业务逻辑
  }
  return response
}, error => {
  // 这里可以处理一些常见的错误状态码
  console.log('err' + error) // for debug
  return Promise.reject(error)
})

// 导出实例
export default service

2、封装api，引入 requset.js

// 引入 src/utils/request.js 
import request from '@/utils/request'

export default {
  getUserInfo(params = {}) {
  	// method 也可以在创建实例的时候配置一个默认的，比如配置一个默认的POST，那么post请求就不用写 method: 'POST' 了
    return request({ url: '/user/userInfo', data: params, method: 'GET' })
  },
  
  queryMenu(params = {}) {
    return request({ url: '/user/userInfo', data: params, method: 'POST' })
  },
}

3、组件中使用接口

// 组件中引入
import { getUserInfo, queryMenu } from '@/api/userApi'

// 使用
created() {
	this.getUserInfo()
	this.queryMenu()
},
methods: {
	getUserInfo() {
		let params = {
			id: 1
		}
		// 注意封装的接口方法不要跟组件中的方法搞混了
		getUserInfo(params).then(res => {
			console.log(res)
		})
	},
	
	// 还可以结合async await 使用
	async queryMenu() {
		let params = {
			roleId: 1
		}
		// axios 返回的是一个 promise，所以我们用 async await 就可以获取.then 的值
		const res = await queryMenu(params)
		console.log(res)
	}
}