axios的封裝、代理轉發、數據mock

引入下axios，然後對axios做下基本的封裝。然後就是mock數據的方式說一下，以及在項目中使用的mock方式。

1、axios封裝

  • axios是什麼就不說了吧，你應該以及很熟了，就直接安裝吧。
$ npm install axios --save
  • 然後我們簡單的在src/utils/request.js中簡單的進行了一下axios封裝。
  • 對於環境的不同判斷，比如開發環境、灰度環境、線上環境等等在@vue/cli3.x中通過新建一個.env.[xxx]的文件來維護–>環境變量和模式

2、數據mock

  • 數據mock我們使用yapi這個接口平台來管理，這樣的話既可以很好的維護一封api文檔，又可以進行數據的mock，這是我們這個項目的的接口文檔：vue-mall
  • 你也可以使用mockjs、esaymock之類的，其實都差不多，yapi還是很好用的，一些基礎的用法文檔都有講，在項目中我用高級mock的比較多，反正都是寫js也可以用mockjs的語法，還是挺方便的。

2、代理轉發

  • 其實代理轉發就是配置下webpack的devServer，詳見webpack從0到1-devServer初探。
  • 而在vue-cli3.x的腳手架生成了項目中，因為隱藏了webpack的配置文件，所以新建一個vue.config.js，然後在所提供的config配置文件修改下就行，原理還是一樣的。
const mockUrl = 'http://yapi.demo.qunar.com/mock/17982'    module.exports = {    // ...    devServer: {      port: 8080,      open: true,      overlay: {        warnings: false,        errors: true      },      proxy: {        '/dev-api': {          target: mockUrl,          pathRewrite: { '^/dev-api': '' },          secure: false,          changeOrigin: true        }      }    },    // ...  }

3、小結

  • 總而言之，vue的腳手架升級了以後，開發配置一個項目還是變得更簡單了。
  • 歡迎大家圍觀項目中的一些實際的用法。
  • 對於老版本的腳手架配置方式：https://www.jianshu.com/p/896f8127fe60

VirMach 便宜 VPS

QNews

QNews