当前位置：首页 > news >正文

Axios 封装网络请求

news 2025/7/23 0:57:15

1 简介

通过Axios的请求拦截器和响应拦截器实现登录拦截，参数封装。
注意：前提是你的vue已经安装了Axios。
附安装代码：

npm install axios

2 封装代码

2.1 utils文件夹下创建 request.js

// 网络请求方法
import axios from 'axios'
import router from '@/router'// 自定义axios对象  （ajax对象就是axios）
const ajax = axios.create({baseURL: 'http://请求IP地址:端口/api', // 服务器基地址headers: {'Content-Type': 'application/json; charset=utf-8'},timeout: 10000
})// 添加请求拦截器，判断token是否过期
// 请求拦截器
// 设置axios请求头加入token
ajax.interceptors.request.use(config => {// 判断是否有token（是否已经登录），不是请求token,就对请求添加tokenif (localStorage.getItem('token') && config.url !== 'admin/auth/token') {//在请求头加入token，名字要和后端接收请求头的token名字一样config.headers.authorization = localStorage.getItem('token')}// 根据请求方法自动选择传递参数的方式// get delete 传递params参数// post，put，patch 传递data参数if (config.method === 'post' || config.method === 'put' || config.method === 'patch') {config.data = config.params}return config},error => {return Promise.reject(error)})// 响应拦截器
ajax.interceptors.response.use(response => {// 判断是否登录成功if (response.data.code === 0) {console.log(response.data.msg || '请求出错,稍后重试')}return response.data},error => {// Token过期，请求响应 401 时，用户手动获取token，强制跳转登录页面if (error.response && error.response.status === 401) {//清除tokenlocalStorage.removeItem('token')console.log('登录失效，请重新登录')//跳转router.push('/login')} else {console.log('服务器连接异常')}return Promise.reject(error)})export default ajax  // 导出一个axios函数

2.2 api文件夹下创建index.js
请求的统一出口。

// 登录为例，获取token，获取账户信息
import {recommendToken, authInfo} from './login'export default {recommendToken,authInfo
}

2.3 api文件夹下创建login.js
存放所有的登录请求

// 封装发起的请求
import request from '@/utils/request'// 封装网络请求方法
export const recommendToken = params => request({url: 'admin/auth/token',method: 'POST',params
})export const authInfo = param => request({url: 'admin/auth/AuthInfo',method: 'GET',param
})

3 使用

api.recommendToken({userName: this.username,password: this.password
}).then(res => {// 请求数据处理const token = res.data.accessToken// 存储tokenlocalStorage.setItem('token', 'Bearer ' + token)// 跳转到首页this.$router.push('/')
}).catch(error => {// 错误捕获console.log('服务器错误：' + error.message)
}).finally(() => {})api.authInfo().then(res => {// 请求完成后逻辑……
}).catch(error => {// 错误捕获console.log(error)
})