JavaScript_mock接口数据+ajax获取数据内容

最近在进行练习，设想场景，若在开发过程中，后端同学无法及时给到对应接口，前端同学如何自己mock数据并进行后续内容操作。以下是练习的demo：

1. mock+node 造数据

1.1 搭建环境

• 新建mockserver文件夹
• npm init 初始化项目，生成package.json文件，并输入自己所需内容
• 安装依赖 npm i express npm i mockjs
• npm run start 运行接口服务器，确保接口可以被访问到

package.json 文件内容：

{
  "name": "mockserver",
  "version": "1.0.0",
  "description": "模拟接口",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node index.js"
  },
  "author": "Ably",
  "license": "ISC",
  "dependencies": {
    "express": "^4.17.3",
    "mockjs": "^1.1.0"
  }
}

1.2 最终项目目录及文件内容

• index.js入口文件，配置监听端口以及网络请求相关信息
• api
  • api.js 封装获取接口数据内容
  • xxx.json 不同接口最终返回的mock数据模板
    

1.2.1 index.js

// 入口文件
const express = require('express');  // 引入express框架
const app = express();  // 获取app实例

const router = require('./api/api.js');  // 路由

// 跨域访问
app.use('*', function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Methods", "PUT, GET, POST, DELETE, OPTIONS");
    res.header("Access-Control-Allow-Headers", "X-Requested-With");
    res.header("Access-Control-Allow-Headers", "Content-Type");
    next();
})

app.use('/api', router) // 基础路由，拼接在127.0.0.1后面，所以之后访问的基础路由形式为 127.0.0.1:8090/api 

// 拼接在api模块后的路径，访问router里面的数据
// app.use('/module2', router2)
app.listen('8090', () => { // 监听对应端口
    console.log("服务器启动，可以被访问")
})

1.2.2 api.js

const express = require('express');
const fs = require('fs');
const router = express.Router();
const Mock = require("mockjs"); // 指定范围，通过mock中的方法，随机生成各种数据

fs.readdir('./api', function(err, files){ // 访问api目录下的哪个JSON文件，就读取对应文件中的内容值
    if(err){
        console.log(err)
    } else {
        files.forEach((item, index) => {
            router.all(`/${item.replace(/.json/, '')}`, function(req, res){  // 针对所有类型的请求，都是这样处理并返回数据
                fs.readFile(`./api/${item}`, 'utf-8', function(err, data){
                    if(err) {
                        console.log(err)
                    } else {
                        res.json(Mock.mock(JSON.parse(data)))
                    }
                })
            })
        })
    }
})
module.exports = router

1.2.3 fruits.json

按照此格式书写mock数据，Mock.mock方法会将数据处理成我们想要的形式。

{
    "status": 200,
    "dataSource|1-18": [{
        "key|+1": 0,
        "fruitsname|1": ["苹果", "香蕉", "哈密瓜", "柠檬"],
        "fruitsicon|1": ["🍎", "🍌", "🍈", "🍋"],
        "fruitschara|1": ["香甜", "可口", "软糯", "清新"]
    }]
}

2. ajax+promise 用数据

• 新建一个getData.js文件，封装网络请求方法，发送请求，获取最终数据

getData.js 

const { XMLHttpRequest } = require('xmlhttprequest')

function getData (url){
    const promise = new Promise((resolve, reject) => {
        const handler = function (){
            if(this.readyState !== 4) {
                return
            }
            if(this.status === 200){
                resolve(this.responseText);
            } else {
                reject(new Error(this.statusText));
            }
        }
        const client = new XMLHttpRequest();
        client.open("GET", url);
        client.onreadystatechange = handler;
        client.responseType = "json";
        client.setRequestHeader("Accept", "application/json");
        client.send();
    })

    return promise
}

getData('http://127.0.0.1:8090/api/fruits').then((res) => {
    console.log(res,  '返回结果')
})

• node getData.js 查看终端返回结果内容

mock数据学习来源
promise学习来源

总结用法，希望可以帮助到你，
我是Ably，你无须超越谁，只要超越昨天的自己就好~