axios和mock

為什么把axios和mock放在一起呢翻默？

因?yàn)樵陂_(kāi)發(fā)環(huán)境它們有時(shí)候需要配合使用，現(xiàn)代項(xiàng)目往往是前后端分離式的開(kāi)發(fā)修械，前端和后端的主要聯(lián)系在于接口的聯(lián)調(diào)趾牧，前端往往需要依賴后端提供的接口返回的數(shù)據(jù)來(lái)編碼頁(yè)面邏輯肯污。但因?yàn)榉蛛x式的開(kāi)發(fā)吨枉，前端可能在需要某個(gè)接口的時(shí)候，這個(gè)接口后端還沒(méi)有開(kāi)發(fā)完成哄芜，無(wú)法調(diào)用。mock便是為了應(yīng)付這種場(chǎng)景认臊，后端沒(méi)數(shù)據(jù)沒(méi)有關(guān)系圃庭，我前端自己造失晴，后端提供接口文檔說(shuō)明接口規(guī)范，前端根據(jù)文檔正常定義xmlhttp請(qǐng)求涂屁，然后調(diào)用mock攔截請(qǐng)求书在，返回mock定義的數(shù)據(jù)拆又，這樣就實(shí)現(xiàn)了偽后端聯(lián)調(diào)的效果。

那么遏乔，這個(gè)過(guò)程如何實(shí)現(xiàn)呢义矛？

不著急盟萨，我們先分別看看這兩個(gè)插件的用法。

axios

官方文檔見(jiàn)這里

axios是一款基于Promise的用于瀏覽器和node.js環(huán)境的http請(qǐng)求插件捻激。

現(xiàn)以常見(jiàn)的基于npm和webpack項(xiàng)目為例，來(lái)大概介紹下其使用方法：

1. 首先安裝axios插件胞谭，我這里用的yarn垃杖，用npm或者cnpm之類的請(qǐng)自行切換對(duì)應(yīng)的命名丈屹。
   

   yarn add axios
   

2. 統(tǒng)一請(qǐng)求配置和設(shè)置攔截器
   
   在assets/js/目錄下新建http.js文件，添加公共的請(qǐng)求配置和對(duì)應(yīng)的request和response攔截器旺垒。
   

   import axios from 'axios'
   
   const instance = axios.create({
     timeout: 30000,
     headers: {}
   });
   
   // 添加請(qǐng)求攔截器
   instance.interceptors.request.use(function (config) {
     // 在發(fā)送請(qǐng)求之前做些什么彩库，比如說(shuō)這里統(tǒng)一調(diào)用loading遮罩層先蒋，給每個(gè)請(qǐng)求添加時(shí)間戳的參數(shù)
     return config;
   }, function (error) {
     // 對(duì)請(qǐng)求錯(cuò)誤做些什么
     return Promise.reject(error);
   });
   
   // 添加響應(yīng)攔截器
   instance.interceptors.response.use(function (response) {
     // 對(duì)響應(yīng)數(shù)據(jù)做點(diǎn)什么，比如說(shuō)移除遮罩層竞漾，根據(jù)后端返回code判斷是不是登錄失效而統(tǒng)一配置跳到登錄頁(yè)
     if(response.status === 200) return response.data;
     return Promise.reject(response);
   }, function (error) {
     // 對(duì)響應(yīng)錯(cuò)誤做點(diǎn)什么
     return Promise.reject(error);
   });
   
   export default instance;
   

3. 使用
   
   在main.js或者vue項(xiàng)目的store.js中引入http.js中實(shí)例化的axios對(duì)象instance眯搭。
   

   import $http from '../http.js'
   

   在main.js中，可以將$http掛載到Vue原型上鳞仙，這樣就可以直接在各組件中調(diào)用。

   // 掛載到原型上后可通過(guò)this.$http來(lái)調(diào)用
   Vue.prototype.$http = $http
   

   又或者直接在store.js（可以根據(jù)實(shí)際使用自由拆分再合并到store.js）中引入繁扎，然后配置請(qǐng)求幔荒，在各組件中用dispatch的方法調(diào)用梳玫。
   

   import Vue from 'vue'
   import Vuex from 'vuex'
   import http from '../http.js'
   Vue.use(Vuex)
   export default new Vuex.Store({
     state: {},
     mutations: {},
     actions: {
       getWeatherInfo({commit},str){ // 獲取城市天氣,str為城市code，如深圳為101280601
         return new Promise((resolve, reject) => {
           http({
             method: 'get',
             url: `/api/weather/city/${str}`, // 該請(qǐng)求的ip為http://t.weather.sojson.com提澎，有興趣的可以試試，能夠調(diào)通
           }).then(rs => {
             if(rs.result === 'success') {
               resolve(rs)
             }else{
               reject(rs)
             }
           })
         })
       },
     },
     modules: {}
   })
   

   經(jīng)過(guò)上面這樣的配置后念链，你可以在組件中這樣調(diào)用：
   

   this.$store.dispatch('getWeatherInfo',101280601).then(rs => {/* ... */})
   

   上面這種配置方式的好處是service層和views層的代碼可以很好的解耦，后期某個(gè)接口若有改動(dòng)掂墓，直接去store.js修改相應(yīng)請(qǐng)求的配置，而不用一個(gè)一個(gè)去搜索使用到了這個(gè)接口的每處代碼然后一一修改君编。
   

mock

官方文檔見(jiàn)這里

先搬個(gè)官網(wǎng)的使用說(shuō)明：

# 安裝
yarn add mockjs

// 使用 Mock
var Mock = require('mockjs')
var data = Mock.mock({
    // 屬性 list 的值是一個(gè)數(shù)組跨嘉，其中含有 1 到 10 個(gè)元素
    'list|1-10': [{
        // 屬性 id 是一個(gè)自增數(shù)吃嘿，起始值為 1，每次增 1
        'id|+1': 1
    }]
})
// 輸出結(jié)果
console.log(JSON.stringify(data, null, 4))

說(shuō)實(shí)話兑燥，上面的代碼是看懂了亮瓷，但并沒(méi)有什么用降瞳，因?yàn)楣饪窟@個(gè)使用方法，我也不知道如何將它和axios的請(qǐng)求聯(lián)系起來(lái)挣饥。網(wǎng)上搜索許久斗塘，也不知道個(gè)個(gè)都是大神還是怎么回事亮靴，幾乎都是復(fù)制粘貼的內(nèi)容，而內(nèi)容主體與官網(wǎng)說(shuō)明沒(méi)有多少出入茧吊，看完依舊很懵贞岭。

那么到底該怎么使用呢？浪里淘沙般的操作還是讓我找到了一些有幫助的帖子瞄桨，按照思路整了一番话速，終于找到一種能讓自己滿意使用mock.js的模式了芯侥。

組合使用

我對(duì)mockjs的期望一直是非侵入式攔截，并且有個(gè)類似總開(kāi)關(guān)的存在可以決定是否開(kāi)啟mockjs柱查。

那如何來(lái)使用mockjs呢？

1. 首先在某文件夾中新建mock.js文件唉工，其內(nèi)容大致如下：

   const MOCK = require('mockjs')
   MOCK.mock('/api/weather/city/101280601','get',{
     status: 'error',
     msg: '天氣查詢失敗'
   })
   

2. 在main.js中require加載mock.js文件

   if(process.env.NODE_ENV === 'development'){ // 區(qū)分環(huán)境研乒，這樣即使打包時(shí)忘了把下面代碼注釋掉也不會(huì)影響生產(chǎn)環(huán)境
     require('../mock') // 不需要開(kāi)啟mock
   }
   

   這樣你在某組件中調(diào)用這個(gè)天氣查詢接口淋硝，你console.log返回的內(nèi)容會(huì)發(fā)現(xiàn)返回的是你自己定義的mock數(shù)據(jù)，查看控制臺(tái)的network也會(huì)發(fā)現(xiàn)這個(gè)請(qǐng)求并沒(méi)有被發(fā)送出去谣膳。但這個(gè)過(guò)程給人的體驗(yàn)與正常從后端接口獲取數(shù)據(jù)無(wú)異竿报。
   
   所以這是什么情況呢继谚？
   
   原來(lái)，只要你的項(xiàng)目中有做require('mockjs')這個(gè)動(dòng)作犬庇，那么mockjs便會(huì)攔截所有請(qǐng)求僧界，不管你是否配置了某個(gè)接口應(yīng)該返回什么樣的假數(shù)據(jù)臭挽。這個(gè)你可以從network中驗(yàn)證這一點(diǎn)。
   
   那么欢峰，在實(shí)際開(kāi)發(fā)過(guò)程中葬荷，為了正常使用mockjs纽帖，我們?cè)谂渲媒涌诘臅r(shí)候都要做兩份，一份是假設(shè)可以正常從后端獲取數(shù)據(jù)的邏輯代碼懊直，一份是mock定義的模擬數(shù)據(jù)代碼。
   
   mockjs使用的基本方式如下：室囊，
   

   MOCK.mock(url,method,mockData) // api雕崩，方式，假數(shù)據(jù)
   

   關(guān)于axios和mockjs一些細(xì)節(jié)方面的東西都可以參考官方文檔盼铁。