Axios和MockJS是前端開發(fā)中常用的兩個工具，其中Axios是一個基于Promise的HTTP請求客戶端，而MockJS則是一個可以生成隨機數(shù)據(jù)，攔截ajax請求的模擬數(shù)據(jù)生成工具。結(jié)合起來，可以使我們更方便地開發(fā)和測試前端頁面。

若要使用MockJS生成假數(shù)據(jù)，需要安裝MockJS庫，并在代碼中引入。以下是一個基本的例子：

// 引入mockjs
import Mock from 'mockjs'
// 設(shè)置假數(shù)據(jù)規(guī)則
Mock.mock('/api/data', {
'list|1-10': [{
'id|+1': 1,
'name': '@cname',
'age|18-60': 1
}]
})

上述代碼會生成一個假API接口，在請求`/api/data`時，返回以下格式的假數(shù)據(jù)：

{
"list": [
{
"id": 1,
"name": "張三",
"age": 23
},
{
"id": 2,
"name": "李四",
"age": 35
},
...
]
}

當使用Axios來獲取這個假API的數(shù)據(jù)時，代碼如下：

import axios from 'axios'
axios.get('/api/data').then(res =>{
console.log(res.data)
})

在瀏覽器控制臺中，可以看到上述MockJS所生成的假數(shù)據(jù)。

除了使用MockJS來模擬請求數(shù)據(jù)外，還可以使用Interceptor來模擬網(wǎng)絡(luò)問題，如404、500錯誤等。例如，在代碼中添加以下攔截器：

axios.interceptors.response.use(res =>{
// 模擬網(wǎng)絡(luò)錯誤
if (Math.random()< 0.5) {
return Promise.reject({ message: '請求出錯' })
}
return res
})

上述代碼是模擬50%的請求失敗率，在一半的情況下，請求將返回一個Promise.reject實例，把請求標記為失敗。這樣可以測試我們在應對網(wǎng)絡(luò)錯誤的情況下頁面的表現(xiàn)是否符合我們的預期。