关于mock:vue使用在线mock平台用axios请求示例-不用自己安装mockjs

44次阅读

共计 712 个字符，预计需要花费 2 分钟才能阅读完成。

通常咱们 mock 数据都会装置 mockjs：yarn add mockjs
然而须要配置很多货色，还要拦挡申请等等，对老手不敌对，即便是新手也感觉麻烦。

举荐大家应用 useMock 在线 Mock 助手，我的项目 API 数据模仿，宣称比外部环境更贴心

反对团队合作
灵便解耦
不局域
可重复调试
主动生成文档

Vue 申请示例：

你须要先在 useMock 平台增加你本人的我的项目和接口，而后就会失去接口文档，复制 API 链接申请就能够获取到在线 mock 设置的数据了。

以二维码解码接口 mock 为例：

在线示例 Vue：https://www.usemock.com/demo/…

示例图：

<script>
//vue 示例代码
  const App = {data() {
      return {
        apiUrl:"https://2weima.usemock.com/api/qrdecode",
        info:null
      }
    },
    methods: {onReqApi(){
        // 应用 axios 发申请
        axios.post(this.apiUrl,{qr_image:"https://img.2weima.com/qr_template/2021/6/26/8857784941a0f2d2a024044f414c69f9.jpg"})
        .then(response =>{
          this.info = response.data
          console.log('因为跨域申请，在 Network 中多一个 Request Method: OPTIONS 申请是失常的。')
          console.log('response data:',this.info)
        })
      }
    }
  }

  Vue.createApp(App).mount('#app')

</script>

正文完