ホームページ >ウェブフロントエンド >jsチュートリアル >ajaxリクエストとaxiosパッケージの操作方法
今回は、ajax リクエストと axios パッケージの操作方法と、ajax リクエストと axios パッケージを操作する際の注意点について説明します。以下は実践的なケースですので、見てみましょう。
vue では、よく使用されるデータ リクエスト: vue-resource、axios
今日は axios の post リクエストについて話します
github ソース ファイルとドキュメント アドレス: [https://github] .com/axios/axios】
+ まずは axios を紹介します
CDN: <script src="https://unpkg.com/axios/dist/axios.min.js"></script> npm: npm install axios 并在全局的js中引入:import axios from 'axios';
•get request
axios.get('/user?ID=12345') .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); });
•post request
依赖于qs包,将对象转换成以&连接的字符串 //例: axios.post( postUrl ,qs.stringify({userid:1,username:'yyy'})).then(function (response) { console.log(response); })
付録: axios の設定
メソッドには、3つあります実際には、URL のみが必要です。便宜上、axios には各メソッドのエイリアスもあります。
axios.post('/user', context.state.test02)完全なリクエストには .then と .catch も含める必要があります
.then(function(res){ console.log(res) }) .catch(function(err){ console.log(err) })リクエストが成功した場合は .then が実行され、それ以外の場合は .catch が実行されますこれら 2 つのコールバック関数は、内部で直接アクセスされた場合、独自の独立したスコープを持ちますこれでは、Vue インスタンスにアクセスできません現時点では、この問題を解決するには .bind(this) を追加するだけです
.then(function(res){ console.log(this.data) }.bind(this))この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、こちらをご覧ください。 PHP 中国語 Web サイトの他の関連記事にも注目してください。 推奨書籍:
echarts ノードを操作して動的データを表示する方法
プロジェクトで vue+.sync モディファイアを使用する
以上がajaxリクエストとaxiosパッケージの操作方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。