Vue通过 axios 网络请求到动态数据案例

利用 axios 库发送网络请求：

import axios from 'axios'

axios.interceptors.response.use(
  res => res.data,
  err => Promise.reject(err)
)

axios.interceptors.request.use(config => config)

/**
 * 进行get网络请求
 * @param {string} url 网络请地址
 * @returns Promise对象
 * 示例：
 * 。。。。
 */
export const get = url => axios.get(url)

export const post = (url, data = null) => axios.post(url, data)

虚拟 mooc 数据：

{
  "id":100,
  "title":"sesfewfjlfew",
  "body":"<p style='box-sizing: border-box; margin-top: 20px; margin-bottom: 20px; padding: 0px; border: 0px; color: rgb(34, 34, 34); font-family: &quot;PingFang SC&quot;, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei&quot;, &quot;WenQuanYi Micro Hei&quot;, &quot;Helvetica Neue&quot;, Arial, sans-serif; font-size: 18px; text-align: justify; white-space: normal; background-color: rgb(255, 255, 255);'>  普法尔茨州的高-魏恩海姆小镇，之前曾是教堂城堡的一部分，18世纪后被改造成钟楼。因为地基沉降及其他未知原因，钟楼多年来处于倾斜的状态，人们在1991年对其进行了整修加固。由于申报吉尼斯世界纪录需要1.74万欧元，所以没有进行准确的测量。这次居民们终于凑足了费用，7月进行的测量显示：这座钟楼的倾斜度达到了5.43 度，超过了德国北部的另两座斜塔，也超过了世界闻名的比萨斜塔（3.97度），世界“斜塔之冠”实至名归。</p><p> <iframe src=''/> <img src='https://p3-sign.toutiaoimg.com/tos-cn-i-tjoges91tu/TGEG55f4vbrKat~noop.image?_iz=58558&from=article.pc_detail&x-expires=1662714816&x-signature=EZEGQTTx1O91euXpy%2FvVOPC44n0%3D' class='syl-page-img'/></p><br/>"
}

前端页面：

<template>
  <div>
    <!-- 还没有进行网络请求时，获取info为null，会报警，所以加个? -->
    <h3>{{ info?.title }}</h3>
    <div v-html="info?.body"></div>
    <!-- 除了加问号之外，还可以使用条件渲染，这种写法用户体验会更好 -->
    <!-- <template v-if="info == null">
      <loading />
    </template>
    <template v-else>
      <h3>{{ info.title }}</h3>
      <hr />
      <div v-html="info.body"></div>
    </template> -->
  </div>
</template>

<script>
import { get } from "@/utils/http";
export default {
  data() {
    return {
      info: null,
    };
  },
  async mounted() {
    // 进行网络请求
    let ret = await get("/mock/news.json");
    this.info = ret;
  }
};
</script>

<style lang="scss" scoped></style>