VueJs構築Axiosインターフェースリクエストツール例の詳細説明-jsチュートリアル-php.cn

この記事では、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: '', 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: '', components: { App } })

ログイン後にコピー

With上記の構成では、プロジェクトで axios ツールを使用できます。次に、このツールをテストしてみましょう。

Axios ツールの使用

src/page/Index.vue ファイルを変更して、コードを次のコードに調整しましょう:

ログイン後にコピー

インターフェースによって要求されたデータを Index.vue のブラウザーのコンソールに入力します。あなたと私の場合は、インターフェイスの設定が正しく行われていることを意味します。以下に示すように: