需要学习async和await

src/apis/update.js

@@ -0,0 +1,9 @@
+import request from "@/request/index.js";
+
+export const cinema_list = () => {
+    // console.log('cinema_list')
+    return request({
+        url: '/update/cinema/',
+        method: 'get'
+    })
+}

src/request/config.js

@@ -1,8 +1,9 @@
 export default {
     method: 'get',
-    baseURL: 'http://localhost:8001',
+    baseURL: 'http://127.0.0.1:8000',
     headers: {
-        'Content-Type': 'application/json;charset=UTF-8'
+        'Content-Type': 'application/json;charset=UTF-8',
+        'Authorization': 'token 4e63b8854974c1fdac9deb891fd74dc145b53f85'
     },
     timeout: 10000,
     withCredentials: true,

src/request/index.js

@@ -1,111 +1,73 @@
 import axios from "axios";
 import config from "@/request/config.js";
-import router from "@/router";
+// import {ElMessage} from "element-plus";
-import { ElMessage } from 'element-plus';
+// import {rejects} from "node:assert";
+// import router from "@/router";
+
+
+// const config = {
+//     method: 'get',
+//     baseURL: 'http://127.0.0.1:8000',
+//     headers: {
+//         'Content-Type': 'application/json;charset=UTF-8',
+//         'Authorization': 'token 4e63b8854974c1fdac9deb891fd74dc145b53f85'
+//     },
+//     timeout: 10000,
+//     withCredentials: true,
+//     responseType: 'json',
+// }
+
+console.log('axios')
+
+function request(options) {
+    const instance = axios.create({...config})
+
+    options = {...options, instance} // 使用创建的实例
 
-export default function request(options) {
-    return new Promise((resolve, reject) => {
-        const instance = axios.create({...config});
     // 请求拦截器
     instance.interceptors.request.use(
-            (config) => {
+        config => {
-                let token = localStorage.getItem('pm_token');
+            // 处理请求前的逻辑...
-                if (token) {
-                    config.headers.token = token;
 
-                } else {
+            return config
-                    router.push('/update')
-                }
-                return config;
         },
-            (error) => {
+        error => {
-                console.log("request:", error);
+            // 请求错误处理
-                if (error.code === "ECONNABORTED" && error.message.indexOf("timeout") !== -1) {
+
-                    ElMessage({message: "请求超时", type: "error", showClose: true});
-                }
             return Promise.reject(error)
         }
-        );
+    )
+
     // 响应拦截器
     instance.interceptors.response.use(
-            (response) => {
+        response => {
-                return response.data;
+            // 处理响应数据
+
+            return response
         },
-            (err) => {
+        error => {
-                if (err && err.response) {
+            // 处理响应错误
-                    switch (err.response.status) {
+
-                        case 400:
+            return Promise.reject(error)
-                            err.message = "请求错误";
-                            break
-                        case 401:
-                            err.message = "未授权";
-                            break
-                        case 403:
-                            err.message = "拒绝访问";
-                            break
-                        case 404:
-                            err.message = `请求地址出错：${err.response.config.url}`;
-                            break
-                        case 408:
-                            err.message = "请求超时";
-                            break;
-                        case 500:
-                            err.message = "服务器内部错误";
-                            break;
-                        case 501:
-                            err.message = "服务未实现";
-                            break;
-                        case 502:
-                            err.message = "网关错误";
-                            break;
-                        case 503:
-                            err.message = "服务不可用";
-                            break;
-                        case 504:
-                            err.message = "网关超时";
-                            break;
-                        case 505:
-                            err.message = "HTTP版本不受支持";
-                            break;
-                        default:
-                    }
-                }
-                console.log(err);
-                if (err.message) {
-                    ElMessage({message: err.message, type: 'error', showClose: true});
-                }
-                return Promise.reject(err);
-            }
-        );
-        //请求处理
-        instance(options).then(
-            /**
-             * response 统一格式
-             * {
-             *    code: 200,
-             *    msg: '消息[String]',
-             *    data: '返回数据[Any]'
-             * }
-             * code说明：
-             * 200 成功
-             * -1 失败，可能网络不通，可能后台服务异常或其它异常
-             * -2 登录失效跳回登录
-             */
-            (res) => {
-                if (res.code === 200) {
-                    resolve(res);
-                }else{
-                    if (res.code === -2) {
-                        router.push("/login");
-                    }
-                    ElMessage({message: res.msg || "操作失败", type: "error", showClose: true});
-                    reject(res);
-                }
-            }
-        ).catch(
-            (error) => {
-                reject(error);
         }
     )
+
+    return new Promise((resolve, reject) => {
+        instance(options)
+            .then(res => {
+                resolve(res.data)
+                // console.log(res.data)
+            })
+            .catch(err => {
+                reject(err)
+            })
     })
 }
+
+// request({
+//     url: '/update/cinema/'
+// }).then(res => {
+//     console.log(res)
+// })
+
+export default request

src/views/update/index.vue

@@ -1,5 +1,7 @@
 <script setup>
-import {ref, reactive, unref} from 'vue';
+import {ref, reactive, unref, onMounted, onBeforeMount} from 'vue';
+import {cinema_list} from "@/apis/update.js";
+
 
 // 表单部分
 const cinemaSearch = reactive({
@@ -12,7 +14,7 @@ const cinemaSearchRef = ref()
 //  数据校验部分
 const ip_validate = (rule, value, callback) => {
   const regex = new RegExp('((2(5[0-5]|[0-4]\\d))|[0-1]?\\d{1,2})(\\.((2(5[0-5]|[0-4]\\d))|[0-1]?\\d{1,2})){3}');
-  if (value === ''){
+  if (value === '') {
     callback()
   }
   if (!regex.test(value)) {
@@ -50,22 +52,66 @@ const resetSearch = (formEl) => {
   formEl.resetFields()
 }
 
+// const get_table_data = {
+//   async
+// }
+
 // 表格部分
-const tableData = reactive(
+// const tableData = cinema_list().then(res => {
-    [
+//
-      {
+//   if (res.code === 200) {
-        'update_time': '2023-12-13 16:16:18',
+//     console.log(res)
-        'name': '鼎新测试环境3.112',
+//     return res.data
-        'ip': '172.16.3.112',
+//   }
-        'zz_num': '14105121',
+// })
-        'inner_id': '2105',
+// // console.log(tableData)
-        'db_user': 'test',
+//
-        'db_pwd': 'cine123456',
+
-        'sys_ver': '2.0.33.0337ZZ',
+const get_table_data = async () => {
-        'client_ver': '2.033.0337.8894'
+  await cinema_list().then(res => {
+    if (res.length > 0) {
+      console.log(res)
+      return reactive([...res])
+      // console.log(tableData)
+    } else {
+      console.log('else')
+      return reactive([]);
+    }
+  }).catch(err => {
+        console.log('err')
+        console.log(err)
+        return reactive([]);
+      }
+  )
+}
+//
+// let tableData = reactive(
+//     [
+//       {
+//         'update_time': '2023-12-13 16:16:18',
+//         'name': '鼎新测试环境3.112',
+//         'ip': '172.16.3.112',
+//         'zz_num': '14105121',
+//         'inner_id': '2105',
+//         'db_user': 'test',
+//         'db_pwd': 'cine123456',
+//         'sys_ver': '2.0.33.0337ZZ',
+//         'client_ver': '2.033.0337.8894'
+//       }
+//     ]
+// )
+// console.log(tableData)
+//
+onMounted(
+    async () => {
+      console.log('onMounted1')
+      const tableData = await get_table_data();
+      console.log('onMounted2')
     }
-    ]
 )
+
+
+
 </script>
 
 <template>