Ajax リクエストと axios パッケージは vue で完全に処理されます

今回は、vue での ajax リクエストと axios パッケージの完璧な処理について説明します。vue で ajax リクエストと axios パッケージを処理するときの 注意事項 について、実際のケースを見てみましょう。

vue では、よく使用されるデータ リクエストは次のとおりです: vue-resource、axios

今日は axios の post request について話します

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 の設定

上記カプセル化されたメソッドでは、axios の 3 つの設定項目が使用されます。実際には、URL のみが必要です。便宜上、axios には上記の saveForm メソッドなどの各メソッドのエイリアスもあります。など 価格:

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))

この記事の場合、さらに興味深い内容については、中国語の Web サイトの php のその他の関連記事に注目してください。

推奨読書:

nodeはログイン時に画像検証コード機能を実装します

vue親コンポーネントから親コンポーネントに値を渡す手順の詳細な説明

以上がAjax リクエストと axios パッケージは vue で完全に処理されますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。