关于 axios-mock-adapter 调用流程的分析

以用户登录为示例：

• 定义 axios 的 api

import axios from 'axios'let base = ''export const requestLogin = params => { return axios.post(`${base}/login`, params).then(res => res.data) }

• 定义组件的调用方式

import {requestLogin} from '../api/api'handleLogin() {this.$refs.AccountFrom.validate((valid) => {if (valid) {this.logining = true;//NProgress.start();var loginParams = { username: this.account.username, password: this.account.pwd };requestLogin(loginParams).then(data => {this.logining = false;//NProgress.done();let { msg, code, user } = data;if (code !== 200) {this.$message({message: msg,type: 'error'});} else {sessionStorage.setItem('access-user', JSON.stringify(user));this.$router.push({ path: '/' });}});} else {console.log('error submit!!');return false;}});}}

• 定义 axios 的 mock 转发接口

mock.onPost('/login').reply(arg => {let {username, password} = JSON.parse(arg.data)return new Promise((resolve, reject) => {let user = nullsetTimeout(() => {let hasUser = LoginUsers.some(u => {if (u.username === username && u.password === password) {user = JSON.parse(JSON.stringify(u))delete user.passwordreturn true}})if (hasUser) {resolve([200, {code: 200, msg: '请求成功', user}])} else {resolve([200, {code: 500, msg: '账号或密码错误'}])}}, 1000)})})

---

• 在 Login 中点击按钮触发 axios 的 requestLogin 方法

requestLogin(loginParams)

这里的参数就是你想要发送过去处理的数据

• 在 axios 的 api 中触发 axios.post 方法

axios.post(`${base}/login`, params)

发送 post 请求，第一个参数起索引作用，第二个参数是待处理数据，这里用了箭头函数做定义，完整的展开式应该是这样子的：

export const requestLogin = params => { return axios.post(`${base}/login`, params).then(res => res.data) }export function requestLogin (params) {  return axios.post(`${base}/login`, params).then(    function getRes (res) {      return res.data    }  )}

• 在 axios.post 中触发 axios-mock-adapter 的 onPost 方法

这里应该是通过浏览器拦截了 post，将之转发到 axios-mock-adapter

• 在 axios-mock-adapter 里触发了 onPost.reply，replay 中也用了箭头函数

mock.onPost('/login').reply // 前面的 onPost 仅仅转发索引的作用，后面的 reply 是转发后的回调方法

在 replay 中使用 setTimeout 设置计时器，这里还使用了 Array 类型的 some 方法

• 在 onPost.replay 方法中处理逻辑，返回一个 resolve 方法，并触发 axios.post 的回调方法 axios.post.then

axios.post(`${base}/login`, params).then(res => res.data)

注意这里的 then 中的 res 是 Promise 对象，这个对象通过调用其 data 属性得到在 resolve 中的 object Object 对象，假如登录成功，那么这里的 res.data 是

{code: 200, msg: '请求成功', user}

• 回调方法触发后返回再触发调用方法 requestLogin 的回调方法 requestLogin.then

requestLogin(loginParams).then(data => {

这里使用 let 得到 data 中的属性的时候必须使用对应的属性名，否则就是 undefined，参考 JavaScript Object 对象

let { a1, a2, a3 } = dataconsole.log('TEST: requestTest.then data = ' + data)console.log('TEST: requestTest.Then code = ' + a1) // undefinedconsole.log('TEST: requestTest.then msg = ' + a2) // undefinedconsole.log('TEST: requestTest.then newMsg = ' + a3) // undefinedlet { code, msg, newMsg } = data