在vue中使用axios+mock.js模拟数据请求【前端测试后台接口】

在vue中使用axios+mock.js模拟数据请求

1、使用npm安装mock.js和axios。

npm install mockjs --save
npm install axios --save

2、在.vue页面引入axios(在哪个模块中使用就在哪个模块中引入/全局引入)

import axios from "axios";

3、在src中新建mock.js，并在mock.js中写入代码，用于模拟后台返回的数据。

// mock.js
import Mock from 'mockjs'

// Mock.mock("url",'type',dataRes);
Mock.mock("/getData", 'get', {
     
    text: "这是发起get请求返回的数据"
});
Mock.mock("/postData", 'post', function(options) {
     
    console.log(options); // 这是发送post请求时所传递给后台的数据
    return {
     
        text: "这是发起post请求返回的数据"
    }
})

4、在main.js中引入mock.js的路径。

//引入mock.js的路径
require('./axios/mock')

5、在.vue页面中发起请求。

  created() {
     
    this.getDataFunction();  //调用函数
    this.postDataFunction();
  },
  methods: {
     
    getDataFunction() {
     
      axios.get("/getData")
        .then(res => {
        //请求成功返回的数据
          console.log(res);  //可以res.data获取后台传给前端的数据
        })
        .catch(err => {
       //请求失败返回的数据
          console.log("请求失败");
        });
    },
    postDataFunction(){
     
      axios.post("/postData",{
     "text":"前端发送"})
        .then(res=>{
     
          console.log(res);
        })
        .catch(err=>{
     
          console.log(err);
        })
      }
  }

6、运行之后打开控制台查看

成功之后在控制台可以看到以下的信息。