部分数据来源:ChatGPT
在src目录下 创建 axios/axios-instance.js 文件
import axios from 'axios'
import $store from '@/store/index'
import $router from '@/router/index'
// 引入element-ui弹窗
import { Message } from 'element-ui'
export const baseURL = process.env.VUE_APP_SERVER_URL
// 创建一个自定的axios方法(比原axios多了个基地址)
// axios函数请求的url地址前面会被拼接基地址, 然后axios请求baseURL+url后台完整地址
const reqAxios = axios.create({
baseURL: baseURL
})
// 请求拦截的作用-- 使用axios拦截器处理api接口调用时,部分参数重复调用问题
reqAxios.interceptors.request.use(
function (config) {
// 在发送请求之前做些什么
// 调用接口时统一为请求头挂载 Authorization 字段
if ($store.state.token) {
config.headers.Authorization = $store.state.token
}
return config
},
function (error) {
// 对请求错误做些什么
return Promise.reject(error)
}
)
// 响应拦截 -- 解决token过期问题
reqAxios.interceptors.response.use(
function (response) { // 成功的回调
// 2xx 范围内的状态码都会触发该函数。
// 对响应数据做点什么
return response
},
function (error) { // 失败的回调
// 超出 2xx 范围的状态码都会触发该函数。
// 对响应错误做点什么
if (error.response.status === 401) {
// 无效的 token
// 把 Vuex 中的 token 重置为空,并跳转到登录页面
....
$router.push('/login')
// 弹窗提示
Message.error('用户身份已过期,请重新登录!')
}
return Promise.reject(error)
}
)
// 导出自定义的axios方法, 供外面调用传参发请求
export default reqAxios
在src目录下 创建 api 文件夹 ,文件夹内存放不同页面的接口的模块,比如:a.js ,b.js
import reqAxios from '@/utils/axios/axios-instance.js'
/**
* 注册接口
* @param {*} param0 {username: 用户名, password: 密码, repassword: 确认密码}
* @returns Promise对象
*/
export const registerAPI = ({ username, password, repassword }) => {
return reqAxios({
method: 'POST',
url: '/api/reguser',
data: {
// 简写形式
username,
password,
repassword
}
})
}
/**
* 登录接口
* @param {*} param0 {username: 用户名, password: 密码}
* @returns Promise对象
*/
export const loginAPI = ({ username, password }) => {
return reqAxios({
method: 'POST',
url: '/api/login',
data: {
username,
password
}
})
}
/**
* 获取-用户基本资料接口
* @returns Promise对象
*/
export const getUserInfoAPI = () => {
return reqAxios({
method: 'GET',
url: '/my/userinfo'
// headers: {
// Authorization: $store.state.token
// }
})
}
注意:
前端发送请求最常⽤的是get请求还有post请求,get请求只能传 params 参数,
query参数都是拼在请求地址上的,post 可以传 body 和 query 两种形;
import { loginAPI } from '@/api/index.js'
export default {
methods: {
async btn_login() {
const { data: res } = await loginAPI(this.loginForm)
}
}
}
下面是具体的配置方法和全局拦截器的使用方法:
首先,我们需要安装 Axios 模块。打开终端并执行以下命令即可:
npm install axios --save
在 Vue 2 中使用的是全局对象 Vue,请在主入口文件 main.js
中添加以下代码:
import Vue from 'vue'
import axios from 'axios'
Vue.prototype.$http = axios.create({
baseURL: 'https://api.example.com'
})
这里使用了 Vue.prototype
扩展名去挂载了一个新属性 $http
,并设置了一个全局的基本配置 baseURL
:https://api.example.com
。
现在,在项目的任何地方都可以使用 $http
发送请求了,例如在某个组件中,只需要调用 $http.get()
或 $http.post()
方法即可发送请求到指定地址:
export default {
methods: {
fetchData() {
this.$http.get('/users').then(response => { // 这里应该改成你自己的接口地址
console.log(response.data)
})
}
}
}
有时候我们需要在每个请求前和请求后执行一些操作,例如显示加载动画、统一处理错误等。这时候就要用到 Axios 的拦截器了。我们可以在创建 Axios 实例的时候添加拦截器,也可以添加全局拦截器来统一处理请求或响应。
Axios 允许我们在发送请求前对请求进行拦截并修改它们,例如在请求头中添加一些验证信息、显示加载动画等。使用 interceptors.request.use()
方法就可以很方便地实现。示例代码如下:
Vue.prototype.$http.interceptors.request.use(config => {
// 显示加载动画等操作
return config // 不要忘记返回 config
}, error => Promise.reject(error))
config
参数包含当前请求的配置信息,你可以修改这个对象来修改请求参数、请求头信息等。最后需要返回这个新的 config
对象,并用 Promise 将其返回。
同样,Axios 也允许我们在接收到响应后对响应进行拦截和处理。例如过滤非法数据、判断数据是否超时等。使用 interceptors.response.use()
方法即可完成。示例代码如下:
Vue.prototype.$http.interceptors.response.use(response => {
// 隐藏加载动画等操作
if (response.data && response.data.code !== 0) {
// 处理错误逻辑
}
return response // 注意这里也需要返回响应对象
}, error => Promise.reject(error))
response
参数表示服务器返回的数据或响应,并需要通过 Promise 返回该响应对象。
有时候请求失败可能会导致意想不到的结果,例如页面崩溃、错误信息泄露等。为了避免这种情况,我们需要在 Axios 请求失败时进行适当的错误处理。可以使用 interceptors
拦截器中的第二个回调函数来统一处理。
Vue.prototype.$http.interceptors.response.use(response => {
// 隐藏加载动画等操作
if (response.data && response.data.status === 'error') {
alert(response.data.error)
return Promise.reject(new Error(response.data.error))
}
return response
}, error => {
// 这里统一处理请求错误
console.log(error.message)
alert(error.message)
return Promise.reject(error)
})
以上就是 Axios 的全局拦截器的使用方法,你可以根据具体需求进行适当的修改和扩展,来实现更加丰富的功能。没错,小白也可以轻松使用 Vue 2 + Axios 的组合!