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

二次封装axios

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

request.js

1. import axios from 'axios'
2. import { ElMessage } from 'element-plus'
4. const http = axios.create({
5.     baseURL: 'https:/v3pz.itndedu.com/v3pz',
6.     timeout: 10000,
7.     headers: { 'X-Custom-Header': 'foobar' }
8. });
10. // 添加拦截器
11. // 添加请求拦截器
12. http.interceptors.request.use(function (config) {
13.     // 在发送请求之前做些什么
14.     // token作用户鉴权
15.     const token = localStorage.getItem('pz_token')
16.     // 不需要添加token的api
17.     const whiteUrl = ['/get/code', '/user/authentication', '/login']
18.     if (token && !whiteUrl.includes(config.url)) {
19.         config.headers['X-token'] = token
20.     }
21.     return config;
22. }, function (error) {
23.     // 对请求错误做些什么
24.     return Promise.reject(error);
25. });
27. // 添加响应拦截器
28. http.interceptors.response.use(function (response) {
29.     // 2xx 范围内的状态码都会触发该函数。
30.     // 对响应数据做点什么
31.     // 对接口异常的数据 给用户提示
32.     if (response.data.code === -1) {
33.         ElMessage.warning(response.data.message)
34.     }
35.     if (response.data.code === -2) {
36.         // token错误 清楚缓存
37.         localStorage.removeItem('pz_token')
38.         localStorage.removeItem('pz_userInfo')
39.         localStorage.removeItem('pz_v3pz')
40.         //window.location.orgin 当前页面路由
41.         window.location.href = window.location.orgin
42.     }
43.     return response;
44. }, function (error) {
45.     // 超出 2xx 范围的状态码都会触发该函数。
46.     // 对响应错误做点什么
47.     return Promise.reject(error);
48. });
50. export default http

复制代码

接口文件

使用二次封装后的axios进行请求，在api.js中界说全部的请求函数，末了到详细的某个地方再调用

1. import request from '../utils/request'
3. // 发送验证码
4. export const getCode = (data) => {
5.     //发送post请求 data是参数
6.     return request.post('/get/code', data)
7. }
8. // 注册用户
9. export const UserAuthentication = (data) => {
10.     return request.post('/user/authentication', data)
12. }
13. // 登录
14. export const login = (data) => {
15.     return request.post('/login', data)
16. }
17. // 权限管理
18. export const authAdmin = (params) => {
19.     return request.get('/auth/admin', { params })
20. }

复制代码

详细调用

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

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

复制代码

文件布局

that’s all！

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。