VUEプロジェクト-axios包装、簡単モック使用

　VUEの家族のバケットダウンが要約されています

プロジェクト・ビルド・ツール（VUE-CLI）
ルーティング（VUE-ルータ）
状態管理（vuex）
httpリクエストツール

　VUE httpリクエストツールには、独自のプラグインVUE-リソースを持っていますが、vue2.0著者後に更新されていない、そしてそれ以上を推奨axios後。

　以下の項目は、通常の方法、および容易な偽の仮想データを生成する方法の使用を使用VUE axiosあります。

、axiosのインストールと簡単なモック使用

　　1. axios

　　axiosに基づく約束のHTTPクライアント、ブラウザ志向とnodejs。参考住所： https://www.kancloud.cn/yunye/axios/234845

　　機能

- ブラウザが要求を開始するXMLHttpRequests
- ノードは、httpリクエストを開始します
- サポートの約束API
- リクエストとリターンを聞きます
- 変換要求とリターン
- キャンセル要求
- 自動データ変換JSON
- 抵抗するクライアントのサポート

　　インストール

　　　　NPM --save axiosをインストール

　　　　それはプラグインQSをインストールする必要があるので、リクエストパラメータが得られ、データを要求するために、X-WWW-から、URLエンコードを使用して、デフォルトではポストを解決するために、バックグラウンドに渡すことができません

　　　　NPM適量をインストール

　　2.簡単なモック

　　簡単にモックは、視覚的で、かつ迅速にアナログデータの永続性サービスを生成することができます。ローカルインストールを必要としない、唯一の公式ウェブサイトに行くか、着陸後に登録新しいプロジェクトに参加する必要があり、インターフェースの定義とは、プロジェクト内で返されたデータをフォーマットします。

　　住所：https://www.easy-mock.com/login

　　次のステップ：

　　　　1）ログイン

　　　　2）新規プロジェクト

　　　　3）新しいインターフェイスは、基本アクセスアドレスは、URLのです

　　　　4）インタフェース名を定義し、データ形式を返します

　　这样一个接口就定义好了，我们可以通过请求工具访问，就可以得到 /login中刚定义的数据。更多定义easy-mock返回数据格式的方式，具体请参考官网例子。

　　二、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.statusCode = res.statusCode
    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>

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

VUEプロジェクト-axios包装、簡単モック使用

おすすめ