【陪诊系统-PC管理端】axios的二次封装

二次封装axios

1. 引入axios
2. 创建axios实例，添加配置信息，这里主要设置基础url和请求超时时间
3. 给上述创建的实例添加拦截器，对请求、响应分别进行拦截
   根据接口文档显示，当登录成功后，每次请求陪诊师、订单信息都需要携带token，所以在后续请求发送前需要在请求头上添加上这个token（token是登录成功后，服务端返回的，然后被存储到本地）
4. 请求拦截：设置白名单，因为在登录成功前的注册（获取验证码和验证验证码、登录），是不需要携带token的，所以将它排除
5. 响应拦截：根据返回的响应数据（状态码）进行判断，看看是否数据异常，然后给出相应操作

request.js

import axios from 'axios'
import { ElMessage } from 'element-plus'const http = axios.create({baseURL: 'https:/v3pz.itndedu.com/v3pz',timeout: 10000,headers: { 'X-Custom-Header': 'foobar' }
});// 添加拦截器
// 添加请求拦截器
http.interceptors.request.use(function (config) {// 在发送请求之前做些什么// token作用户鉴权const token = localStorage.getItem('pz_token')// 不需要添加token的apiconst whiteUrl = ['/get/code', '/user/authentication', '/login']if (token && !whiteUrl.includes(config.url)) {config.headers['X-token'] = token}return config;
}, function (error) {// 对请求错误做些什么return Promise.reject(error);
});// 添加响应拦截器
http.interceptors.response.use(function (response) {// 2xx 范围内的状态码都会触发该函数。// 对响应数据做点什么// 对接口异常的数据 给用户提示if (response.data.code === -1) {ElMessage.warning(response.data.message)}if (response.data.code === -2) {// token错误 清楚缓存localStorage.removeItem('pz_token')localStorage.removeItem('pz_userInfo')localStorage.removeItem('pz_v3pz')//window.location.orgin 当前页面路由window.location.href = window.location.orgin}return response;
}, function (error) {// 超出 2xx 范围的状态码都会触发该函数。// 对响应错误做点什么return Promise.reject(error);
});export default http

接口文件

使用二次封装后的axios进行请求，在api.js中定义所有的请求函数，最后到具体的某个地方再调用

import request from '../utils/request'// 发送验证码
export const getCode = (data) => {//发送post请求 data是参数return request.post('/get/code', data)
}
// 注册用户
export const UserAuthentication = (data) => {return request.post('/user/authentication', data)}
// 登录
export const login = (data) => {return request.post('/login', data)
}
// 权限管理
export const authAdmin = (params) => {return request.get('/auth/admin', { params })
}

具体调用

具体某个功能组件中调用api中的对应接口来发送真正的请求，这里在登录界面调用获取验证码请求。

import {getCode,UserAuthentication,login,menuPermissions} from '../../api'getCode({tel:loginForm.userName}).then((data)=>{// console.log('data',data);if(data.code === 10000){ElMessage.success('发送成功')}})

文件结构

that’s all！