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 サイトの他の関連記事を参照してください。