今回は、vue で ajax リクエストと axios パッケージを使用する方法を説明します。vue で ajax リクエストと 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); });
依赖于qs包,将对象转换成以&连接的字符串 //例: axios.post( postUrl ,qs.stringify({userid:1,username:'yyy'})).then(function (response) { console.log(response); })
付録: axios を設定する
上記でカプセル化されたメソッドでは、axios を使用して、 3 つの設定項目がありますが、実際に必要なのは URL だけです。便宜上、axios には各メソッドのエイリアスもあります。たとえば、上記の saveForm メソッドは次と同等です。 .then と .catchaxios.post('/user', context.state.test02)
コールバック関数
は独自の独立したスコープを持ち、これに内部で直接アクセスする場合、アクセスすることはできません。 Vue インスタンス現時点では、この問題を解決するには .bind(this) を追加するだけです.then(function(res){ console.log(res) }) .catch(function(err){ console.log(err) })
vue ソースコードを使用してイベントメカニズムを解析する方法
以上がvueでのajaxリクエストとaxiosパッケージの使用方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。