update

public/data/data.json

@@ -0,0 +1,12 @@
+{
+  "data": [
+    {
+      "name": "手机",
+      "price": 1000
+    },
+    {
+      "name": "电脑",
+      "price": 5000
+    }
+  ]
+}

src/router/index.js

@@ -30,6 +30,10 @@ const router = createRouter({
             path: 'turntable',
             name: 'turntable',
             component: () => import('../views/Turntable.vue')
+        }, {
+            path: 'axios',
+            name: 'axios',
+            component: () => import('../views/Axios.vue')
         },]
     }, {
         path: '/pure',

src/router/menu.js

@@ -6,4 +6,5 @@ export default [
     {title: "侦听器", path: '/watch'},
     {title: "计算属性", path: '/computed'},
     {title: "抽奖游戏", path: '/turntable'},
+    {title: "Axios", path: '/axios'},
 ]

src/utils/request.js

@@ -1,7 +1,7 @@
 import axios from "axios";
 
 const request = axios.create({
-    baseURL: 'https://some-domain.com/api/',
+    baseURL: '/',
     timeout: 1000,
     headers: {'X-Custom-Header': 'foobar'}
 })
@@ -9,6 +9,8 @@ const request = axios.create({
 // 添加请求拦截器
 request.interceptors.request.use(function (config) {
     // 在发送请求之前做些什么
+    console.log("这是请求拦截器")
+
     return config;
 }, function (error) {
     // 对请求错误做些什么
@@ -19,9 +21,21 @@ request.interceptors.request.use(function (config) {
 request.interceptors.response.use(function (response) {
     // 2xx 范围内的状态码都会触发该函数。
     // 对响应数据做点什么
-    return response;
+    // return response
+    if(response.status == 200){
+        return response.data
+    }else{
+
+    }
+
 }, function (error) {
     // 超出 2xx 范围的状态码都会触发该函数。
     // 对响应错误做点什么
+    // console.log(error.response.status)
+    if(error.response.status==404){
+        console.log(404)
+    }
     return Promise.reject(error);
 });
+
+export default request

src/views/Axios.vue

@@ -0,0 +1,33 @@
+<template>
+
+</template>
+
+<script>
+// import axios from "axios"
+import request from "../utils/request.js"
+
+export default {
+  name: "Axios",
+  data() {
+    return {data: []}
+  },
+  mounted() {
+    request.get("/data/data1.json").then(res => {
+      this.data = res.data
+      console.log(res)
+    }).catch(err => {
+      console.log(err)
+    }).finally(() => {
+      console.log("结束")
+    })
+
+    // fetch("/data/data.json").then(res => {
+    //   console.log(res)
+    // })
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/Turntable.vue

@@ -39,10 +39,10 @@ export default {
     })
     const awards = reactive([
       {name: "手机一部", score: 0},
-      {name: "10积分", score: 10},
       {name: "自行车", score: 0},
       {name: "20积分", score: 20},
       {name: "洗衣粉", score: 0},
+      {name: "10积分", score: 10},
       {name: "5积分", score: 5},
       {name: "谢谢参与", score: 0},
       {name: "5积分", score: 5},