【模拟接口】代码参考

新建三个文件

index.js文件

const fetch = require('node-fetch');
fetch("https://www.tripadvisor.co.uk/data/graphql/batched", {
  "headers": {
    "accept": "*/*",
    "accept-language": "zh-CN,zh;q=0.9,en;q=0.8",
    "content-type": "application/json",
    "sec-fetch-dest": "empty",
    "sec-fetch-mode": "cors",
    "sec-fetch-site": "same-origin",
    "x-requested-by": "TNI1625!AFiV+JtdbNoW+VzRsUDQ/YzG9Td8zCI84M63m2MXmCVegkyCcjjDCpXtcYkeIrhm3L5QZE+QKXefmFR6o/BvaRo/KYu0v0gEw7dpnLIzk8DMpv2kWOzCPbf0yiEVlYBeUpq91TOZYNeqFNhHlhjWT0SMZbVx/3S9GvesuBNYyloc",
    "cookie": "TADCID=vUsgV8IXtn33XxcoABQCjnFE8vTET66GHuEzPi7KfVz-ZgXlSLUyA9rTMFp_i2kdJKzMPEde3CGCKfzST48YhEXjCbJ65oqERUk; TAUnique=%1%enc%3AudVgR4jeDFihh0jQ8eh6g9U%2BnqwRGRBgkwFQd6DFQYRQ7hkA15SYJg%3D%3D; TASSK=enc%3AAHZ0CzzfBIUfZez2byWAeUS6rb4txOFccs%2BsYnpwu7%2BgzDy7TI3jBABX%2FyIJ5nXq0X7WL9SlZX7fO%2BkbcH0paS8aFKl5JUUGCxlx3H9pWzKgzQR7PJQEWnMKLwYff%2FOGGQ%3D%3D; BEPIN=%1%171a91dc965%3Bweb303a.a.tripadvisor.com%3A30023%3B; ServerPool=X; PMC=V2*MS.94*MD.20200423*LD.20200423; TART=%1%enc%3AoYdI0PHoeoMsc057H844J3GhbQPlLxcK4KyT%2Bt82p1h5FV91LMoiG77E3OFH4GnTCbbPrmZfJsk%3D; TAReturnTo=%1%%2FHotel_Review-g32655-d77237-Reviews-Hollywood_Hotel-Los_Angeles_California.html; PAC=AK1HIw6geuQqeKzSVLPk_WwCAn-yZdIKr64UeKbKqh0s2dPs-FSY_rVNCNbCNGeUn6SCZyno91Im146TBF3cnj4OTwmVnvqGaYcoeKLSJ8X_TEfV3et4edPxFw04UkPphqBbI7ntVWRKzQNX5rY_tAvF4OQPYAKqTq3MUU31iTft6t092mMsEnnScj3rspICc0tRz-Pw3SlBS7dXx2Qg77Ux5psygUME6nsugYiCr4Oh; TAAUTHEAT=tCizqmbEXDzSu6mPABQC5pMD6MhQQX22iUWVeLafiRzVZpBxx-rvjuXKlvg7jeIk9yHOP-mPAo51AFVB2rR-iNHGYsKh6eXM5RVN5ayB3mc4EduWTDlnql2f5wycRYJpg2ThFflll8QjdCBKRbaW1XVAoefpHRz9YBOxWH3XUkysmoOpt9wUmbBOTJ8WzjHCleyIup37NZNNNZJlHtwYesvp-46PPdi4rW1j198; TATravelInfo=V2*AY.2020*AM.9*AD.21*DY.2020*DM.9*DD.22*A.2*MG.-1*HP.2*FL.3*DSM.1587680242565*RS.1; CM=%1%mds%2C1587680244545%2C1587766644%7C; __vt=wOoZKMMFDC8aSh2KABQCq4R_VSrMTACwWFvfTfL3vwzceTcscX0UAdB3IYRyfRumbOhpkumxAI7Ihuio0FVjqbXU_anCNL_SYECZrRHkQPNL3iRWXC8Bpbk-2JoDHi7DYFcUE_9iWxkMMR6jVVJSBeCZ49Q; roybatty=TNI1625!AL5ye7uN4ZEYnJ2bE8WKKA9uowQllUTzjL0NLja1ybcsD%2BjTUAWcoi7V%2FGl6kwW6AbS%2FBlyrs%2BHupsiwv9uy9srFCVYJfx%2BvyJ%2BzpXIOhkx9OMdGHM4%2B9f9RLRSIWN4uC%2BWDsNUvOVcmTfdJla3wgFSfw8b1xZiYHoxfvDUBEQMm%2C1; TASession=%1%V2ID.2F5FCC4AEEAF159CA42A73BF595843B1*SQ.15*PR.40185%7C*LS.DemandLoadAjax*GR.76*TCPAR.38*TBR.7*EXEX.83*ABTR.50*PHTB.85*FS.85*CPU.69*HS.recommended*ES.popularity*DS.5*SAS.popularity*FPS.oldFirst*TS.42590A0812358340E117EEAE3C80D44F*FA.1*DF.0*TRA.true*LD.77237*EAU.b; TAUD=LA-1587680236254-1*RDD-1-2020_04_23*HDD-1-2020_05_03.2020_05_04.1*ARDD-7521-2020_09_21.2020_09_22*LD-6908475-2020.9.21.2020.9.22*LG-6908477-2.1.F.; SRT=%1%enc%3AoYdI0PHoeoMsc057H844J3GhbQPlLxcK4KyT%2Bt82p1h5FV91LMoiG77E3OFH4GnTCbbPrmZfJsk%3D"
  },
  "body": "[{\"query\":\"query ReviewListQuery($locationId: Int!, $offset: Int, $limit: Int, $filters: [FilterConditionInput!], $prefs: ReviewListPrefsInput, $initialPrefs: ReviewListPrefsInput, $filterCacheKey: String, $prefsCacheKey: String, $keywordVariant: String!, $needKeywords: Boolean = true) {\\n  cachedFilters: personalCache(key: $filterCacheKey)\\n  cachedPrefs: personalCache(key: $prefsCacheKey)\\n  locations(locationIds: [$locationId]) {\\n    locationId\\n    parentGeoId\\n    name\\n    placeType\\n    reviewSummary {\\n      rating\\n      count\\n    }\\n    keywords(variant: $keywordVariant) @include(if: $needKeywords) {\\n      keywords {\\n        keyword\\n      }\\n    }\\n    ... on LocationInformation {\\n      parentGeoId\\n    }\\n    ... on LocationInformation {\\n      parentGeoId\\n    }\\n    ... on LocationInformation {\\n      name\\n      currentUserOwnerStatus {\\n        isValid\\n      }\\n    }\\n    ... on LocationInformation {\\n      locationId\\n      currentUserOwnerStatus {\\n        isValid\\n      }\\n    }\\n    ... on LocationInformation {\\n      locationId\\n      parentGeoId\\n      accommodationCategory\\n      currentUserOwnerStatus {\\n        isValid\\n      }\\n      url\\n    }\\n    reviewListPage(page: {offset: $offset, limit: $limit}, filters: $filters, prefs: $prefs, initialPrefs: $initialPrefs, filterCacheKey: $filterCacheKey, prefsCacheKey: $prefsCacheKey) {\\n      totalCount\\n      preferredReviewIds\\n      reviews {\\n        ... on Review {\\n          id\\n          url\\n          location {\\n            locationId\\n            name\\n          }\\n          createdDate\\n          publishedDate\\n          provider {\\n            isLocalProvider\\n          }\\n          userProfile {\\n            id\\n            userId: id\\n            isMe\\n            isVerified\\n            displayName\\n            username\\n            avatar {\\n              id\\n              photoSizes {\\n                url\\n                width\\n                height\\n              }\\n            }\\n            hometown {\\n              locationId\\n              fallbackString\\n              location {\\n                locationId\\n                additionalNames {\\n                  long\\n                }\\n                name\\n              }\\n            }\\n            contributionCounts {\\n              sumAllUgc\\n              helpfulVote\\n            }\\n            route {\\n              url\\n            }\\n          }\\n        }\\n        ... on Review {\\n          title\\n          language\\n          url\\n        }\\n        ... on Review {\\n          language\\n          translationType\\n        }\\n        ... on Review {\\n          roomTip\\n        }\\n        ... on Review {\\n          tripInfo {\\n            stayDate\\n          }\\n          location {\\n            placeType\\n          }\\n        }\\n        ... on Review {\\n          additionalRatings {\\n            rating\\n            ratingLabel\\n          }\\n        }\\n        ... on Review {\\n          tripInfo {\\n            tripType\\n          }\\n        }\\n        ... on Review {\\n          language\\n          translationType\\n          mgmtResponse {\\n            id\\n            language\\n            translationType\\n          }\\n        }\\n        ... on Review {\\n          text\\n          publishedDate\\n          username\\n          connectionToSubject\\n          language\\n          mgmtResponse {\\n            id\\n            text\\n            language\\n            publishedDate\\n            username\\n            connectionToSubject\\n          }\\n        }\\n        ... on Review {\\n          id\\n          locationId\\n          title\\n          text\\n          rating\\n          absoluteUrl\\n          mcid\\n          translationType\\n          mtProviderId\\n          photos {\\n            id\\n            statuses\\n            photoSizes {\\n              url\\n              width\\n              height\\n            }\\n          }\\n          userProfile {\\n            id\\n            displayName\\n            username\\n          }\\n        }\\n        ... on Review {\\n          mgmtResponse {\\n            id\\n          }\\n          provider {\\n            isLocalProvider\\n          }\\n        }\\n        ... on Review {\\n          translationType\\n          location {\\n            locationId\\n            parentGeoId\\n          }\\n          provider {\\n            isLocalProvider\\n            isToolsProvider\\n          }\\n          original {\\n            id\\n            url\\n            locationId\\n            userId\\n            language\\n            submissionDomain\\n          }\\n        }\\n        ... on Review {\\n          locationId\\n          mcid\\n          attribution\\n        }\\n        ... on Review {\\n          __typename\\n          locationId\\n          helpfulVotes\\n          photoIds\\n          route {\\n            url\\n          }\\n          socialStatistics {\\n            followCount\\n            isFollowing\\n            isLiked\\n            isReposted\\n            isSaved\\n            likeCount\\n            repostCount\\n            tripCount\\n          }\\n          status\\n          userId\\n          userProfile {\\n            id\\n            displayName\\n            isFollowing\\n          }\\n          location {\\n            __typename\\n            locationId\\n            additionalNames {\\n              normal\\n              long\\n              longOnlyParent\\n              longParentAbbreviated\\n              longOnlyParentAbbreviated\\n              longParentStateAbbreviated\\n              longOnlyParentStateAbbreviated\\n              geo\\n              abbreviated\\n              abbreviatedRaw\\n              abbreviatedStateTerritory\\n              abbreviatedStateTerritoryRaw\\n            }\\n            parent {\\n              locationId\\n              additionalNames {\\n                normal\\n                long\\n                longOnlyParent\\n                longParentAbbreviated\\n                longOnlyParentAbbreviated\\n                longParentStateAbbreviated\\n                longOnlyParentStateAbbreviated\\n                geo\\n                abbreviated\\n                abbreviatedRaw\\n                abbreviatedStateTerritory\\n                abbreviatedStateTerritoryRaw\\n              }\\n            }\\n          }\\n        }\\n        ... on Review {\\n          text\\n          language\\n        }\\n        ... on Review {\\n          locationId\\n          absoluteUrl\\n          mcid\\n          translationType\\n          mtProviderId\\n          originalLanguage\\n          rating\\n        }\\n        ... on Review {\\n          id\\n          locationId\\n          title\\n          labels\\n          rating\\n          absoluteUrl\\n          mcid\\n          translationType\\n          mtProviderId\\n          alertStatus\\n        }\\n      }\\n    }\\n    reviewAggregations {\\n      ratingCounts\\n      languageCounts\\n      alertStatusCount\\n    }\\n  }\\n}\\n\",\"variables\":{\"locationId\":77237,\"offset\":0,\"filters\":[{\"axis\":\"LANGUAGE\",\"selections\":[\"en\"]}],\"prefs\":null,\"initialPrefs\":{},\"limit\":5,\"filterCacheKey\":null,\"prefsCacheKey\":\"locationReviewPrefs\",\"needKeywords\":false,\"keywordVariant\":\"location_keywords_v2_llr_order_30_en\"}},{\"query\":\"mutation UpdateReviewSettings($key: String!, $val: String!) {\\n  writePersonalCache(key: $key, value: $val)\\n}\\n\",\"variables\":{\"key\":\"locationReviewFilters_77237\",\"val\":\"[{\\\"axis\\\":\\\"LANGUAGE\\\",\\\"selections\\\":[\\\"en\\\"]}]\"}}]",
  "method": "POST",
}).then(res=>res.json())
.then(json=>console.log(JSON.stringify(json)))

index.html文件

<body>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script src="./node_modules/mockjs/dist/mock.js"></script>
    <script src="./node_modules/axios/dist/axios.js"></script>
</body>
<div id="app">
   <div>
       {{JSON.stringify(this.userList)}}
   </div>
</div>

<script>
    // 1:模拟接口
    Mock.mock("/api/user/list","get",{
        "data":[
            {"id":1,name:"xxxx"},
            {"id":2,name:"xxxx"}
        ] 
    })
    new Vue({
        el:"#app",
        data:{
            msg:'hello',
            userList:[]
        },
        mounted(){
            // 2：用axios请求接口
           axios.get("/api/user/list").then(res=>{
               this.userList = res.data
           })
        }
    })
</script>

package.json文件

{
  "dependencies": {
    "mockjs": "^1.1.0",
    "node-fetch": "^2.6.0",
    "vue": "^2.6.11"
  }
}