ホームページ > 記事 > ウェブフロントエンド > VueJs構築Axiosインターフェースリクエストツール例の詳細説明
この記事では、Axios インターフェイス リクエスト ツールを構築するための VueJs を主に紹介します。Axios は、ブラウザーおよび Nodejs 用の Promise に基づいた HTTP クライアントです。必要な方は参考にしていただければ幸いです。
axios の概要
axios は、ブラウザーおよび nodejs 用の Promise ベースの HTTP クライアントです。それ自体には次の特徴があります:
ブラウザから XMLHttpRequest を作成する
node.js から http リクエストを発行する
Promise APIのサポート
リクエストとレスポンスのインターセプト
リクエストとレスポンスデータの変換
リクエストのキャンセル
JSONデータを自動的に変換
クライアントサポートによる予防CSRF/XSRF
前の章では、プロジェクトのディレクトリ構造を理解し、プロジェクトのディレクトリ構造にいくつかの調整を加え、プロジェクトを再び実行することができました。今日は API インターフェース呼び出しツール Axios を構築します。 Vue 自体は ajax 呼び出しをサポートしていません。これらの機能が必要な場合は、対応するツールをインストールする必要があります。
スーパーエージェントやaxiosなど、ajaxリクエストをサポートするツールはたくさんあります。今日は axios を使用します。最近、インターネット上のほとんどのチュートリアル本が axios を使用していると聞いたためです。axios ツール自体は十分に最適化され、カプセル化されていますが、まだ使用が比較的面倒なので、再パッケージ化します。
Axiosツールのインストール
cnpm install axios -D
インストール中は、必ずプロジェクトのルートディレクトリに切り替えてから、インストールコマンドを実行してください。上記のメッセージが表示されれば、インストールは完了です。
Axios ツールをカプセル化します
src/api/index.js ファイルを編集します (前の章でディレクトリ構造を整理したときに、src/api/ ディレクトリに新しい空のindex.js ファイルを作成しました)。ファイルの内容を入力します。
// 配置API接口地址 var root = 'https://cnodejs.org/api/v1' // 引用axios var axios = require('axios') // 自定义判断元素类型JS function toType (obj) { return ({}).toString.call(obj).match(/\s([a-zA-Z]+)/)[1].toLowerCase() } // 参数过滤函数 function filterNull (o) { for (var key in o) { if (o[key] === null) { delete o[key] } if (toType(o[key]) === 'string') { o[key] = o[key].trim() } else if (toType(o[key]) === 'object') { o[key] = filterNull(o[key]) } else if (toType(o[key]) === 'array') { o[key] = filterNull(o[key]) } } return o } /* 接口处理函数 这个函数每个项目都是不一样的,我现在调整的是适用于 https://cnodejs.org/api/v1 的接口,如果是其他接口 需要根据接口的参数进行调整。参考说明文档地址: https://cnodejs.org/topic/5378720ed6e2d16149fa16bd 主要是,不同的接口的成功标识和失败提示是不一致的。 另外,不同的项目的处理方法也是不一致的,这里出错就是简单的alert */ function apiAxios (method, url, params, success, failure) { if (params) { params = filterNull(params) } axios({ method: method, url: url, data: method === 'POST' || method === 'PUT' ? params : null, params: method === 'GET' || method === 'DELETE' ? params : null, baseURL: root, withCredentials: false }) .then(function (res) { if (res.data.success === true) { if (success) { success(res.data) } } else { if (failure) { failure(res.data) } else { window.alert('error: ' + JSON.stringify(res.data)) } } }) .catch(function (err) { let res = err.response if (err) { window.alert('api error, HTTP CODE: ' + res.status) } }) } // 返回在vue模板中的调用接口 export default { get: function (url, params, success, failure) { return apiAxios('GET', url, params, success, failure) }, post: function (url, params, success, failure) { return apiAxios('POST', url, params, success, failure) }, put: function (url, params, success, failure) { return apiAxios('PUT', url, params, success, failure) }, delete: function (url, params, success, failure) { return apiAxios('DELETE', url, params, success, failure) } }
Axios ツールの構成
使用する前に、src/main.js で簡単な構成を実行する必要があります。まず、元の main.js ファイルを見てみましょう
// The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from 'vue' import App from './App' import router from './router' Vue.config.productionTip = false /* eslint-disable no-new */ new Vue({ el: '#app', router, template: '<App/>', components: { App } })
:
// The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from 'vue' import App from './App' import router from './router' // 引用API文件 import api from './api/index.js' // 将API方法绑定到全局 Vue.prototype.$api = api Vue.config.productionTip = false /* eslint-disable no-new */ new Vue({ el: '#app', router, template: '<App/>', components: { App } })
With上記の構成では、プロジェクトで axios ツールを使用できます。次に、このツールをテストしてみましょう。
Axios ツールの使用
src/page/Index.vue ファイルを変更して、コードを次のコードに調整しましょう:
<template> <p>index page</p> </template> <script> export default { created () { this.$api.get('topics', null, r => { console.log(r) }) } } </script>
インターフェースによって要求されたデータを Index.vue のブラウザーのコンソールに入力します。あなたと私の場合は、インターフェイスの設定が正しく行われていることを意味します。以下に示すように:
私の手順を段階的に実行すれば、最終的な結果は私と同じになるはずです。何か問題がある場合は、コードを注意深く確認してください。
関連する推奨事項:
Vue は axios を使用してドメイン全体のデータを詳細にリクエストします
以上がVueJs構築Axiosインターフェースリクエストツール例の詳細説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。