vue項目-axios封裝、easy-mock使用

　vue全家桶概括下來就是

• 項目構建工具（vue-cli）
• 路由(vue-router)
• 狀態管理(vuex)
• http請求工具

　vue有自己的http請求工具插件vue-resource，但是vue2.0后作者就不在更新了，后更推薦axios。

　下面是vue項目中axios常用的方法，以及生成虛擬數據的easy-mock的使用方法。

一、axios安裝和easy-mock的使用

　　1. axios

　　axios基於http客戶端的promise，面向瀏覽器和nodejs。參考地址： https://www.kancloud.cn/yunye/axios/234845

　　特點

• • 瀏覽器端發起XMLHttpRequests請求

  • node端發起http請求

  • 支持Promise API

  • 監聽請求和返回

  • 轉化請求和返回

  • 取消請求

  • 自動轉化json數據

  • 客戶端支持抵御

　　安裝

　　　　npm install --save axios 

　　　　為了解決post默認使用的是x-www-from-urlencoded 去請求數據，導致請求參數無法傳遞到后台，所以還需要安裝一個插件QS

　　　　npm install qs

　　2. easy-mock

　　Easy Mock 是一個可視化，並且能快速生成 模擬數據 的持久化服務。不需要再本地安裝，只需要到官網上注冊登陸后加入或新建項目，在項目內定義接口和返回數據的格式。

　　地址：https://www.easy-mock.com/login

　　步驟如下：

　　　　1）登陸

　　　　

　　　　2）新建項目

　　　　

　　　　3）新建接口，Base URL是訪問地址

　　　　

　　　　4）定義接口名稱和數據返回格式

　　　　

　　這樣一個接口就定義好了，我們可以通過請求工具訪問，就可以得到 /login中剛定義的數據。更多定義easy-mock返回數據格式的方式，具體請參考官網例子。參考其他例子：https://blog.csdn.net/qq_42991509/article/details/94577331

　　二、axios 使用

　　axios的實例方法和配置很多，下面只是常用基本的封裝和使用方式。

　　在vue項目中src文件夾下，有這幾個需要新增的地方。

　　

　　1.  appCount.js文件

const HTTP_BASE_URL = 'https://www.easy-mock.com/mock/5d5f5a3f6778c215243b94ea/'  // easy-mock
const TOKEN = '1234' // token
export default {
  HTTP_BASE_URL,
  TOKEN
}

　　在appCount.js文件中，我們可以放一些全局的變量。例如：訪問地址的ip、token常量，超時取消請求的時常等。

　　2. request.js文件

import axios from 'axios'
import appCONST from './appCount.js'

const requestData  = async (url, params = {}) => {
    let res = await axios({
        url: appCONST.HTTP_BASE_URL + url,
        data: params || {},
        method: params.method || 'POST',
        header: params.header || {
            'content-type': 'application/json'
        }
    })
    console.log(res)
    if(requestSuccess(res)) {
        return res.data
    } else {
        throw requestException(res)
    }
}

/**
 * 請求成功
 */
function requestSuccess(res) {
    const status = res.status
    // 請求錯誤
    if (status !== 200) {
      return false
    }
    const resData = res.data
    return !(resData && resData.code !== 1)
  }


/**
 * 異常
 */
function requestException(res) {
    const error = {}
    error.serverCode = res.status
    const resData = res.data
    error.code = resData.code
    error.msg = resData.msg || '系統錯誤'
    error.data = resData.result || {}
    return error
  }

// 導出封裝函數
export default {
    requestData
}

　　在上面文件中，requestData方法是我們封裝的axios請求，在方法中，我並沒有使用到安裝時qs。因為在方法中定義了請求頭content-type的類型是json格式，所以參數格式直接傳對象進來就可以了。

　　如果沒有定義content-type的類型，那么默認是application/x-www-form-urlencoded。請求參數在Form Data中，只能上傳鍵值對，並且鍵值對都是間隔分開的。

參數形式:  name1=value1&name2=value2。那么最好引入qs，然后將params格式化一下，data:qs.stringify(params)。

　　3. util.js

　　可以寫一些公共的方法，例如：存取本地緩存，參數格式化等方法。然后在需要用到的地方導入這個文件，就可以使用其中的方法了。

　　

export const localSave = (key, value) => {
    localStorage.setItem(key, value)
}
  
export const localRead = (key) => {
    return localStorage.getItem(key) || ''
}

　　使用方式

<script>
import * as util from '@/libs/util'
export default {
    name: 'login',
    data() {
        return {
           da:'' 
        }
    },
    methods: {
       submit() {
           util.localSave('data', '123')
        }
    }
}
</script>

　　4. api.js

import wxRequest from '../libs/request'
// 用戶登錄
const login = (params) => wxRequest.requestData('login', params)

export default {
    login
}

　　5. 調用接口

<template>
    <div>
        <button @click="submit()">點我登陸</button>
    </div>
</template>
<script>
import api from '@/api/api'

export default {
    name: 'login',
    data() {
        return {
           da:'' 
        }
    },
    methods: {
        async submit() {
            try {
                const dd = await api.login()
                console.log(dd)
            } catch(err) {
                console.log(err)
            }
        }
    }
}
</script>

　　更多方法，例如添加攔截器也挺好用。