Vue での axios get と post の使用

1. axios の機能は何ですか?

コンセプト

Axios は本質的に、ネイティブ XMLHttpRequest のカプセル化であり、ブラウザーや Node.js で使用できる Promise ベースの HTTP ライブラリです。

特性

• ブラウザから XMLHttpRequestを作成する
• Node.jsからhttp リクエストを作成する 
• サポート 約束 API
• リクエストとレスポンスをインターセプトする
• リクエストデータとレスポンスデータを変換する
• キャンセルリクエスト
• JSONデータを自動変換する
• クライアントはXSRFに対する防御をサポートします 

2. axiosのダウンロードとリファレンス

npmインストール

npm install axios

vueプロジェクトのmain.jsファイル内に導入axios

import axios from 'axios'

3. コンポーネントでの使用axios

Axios で一般的に使用されるいくつかのリクエスト メソッドは何ですか:

• get: (通常は) データを取得するために使用されます。
• post: データの送信 (フォームの送信 + ファイルのアップロード)
• put: データを更新 (または編集) (すべてのデータがバックエンド (またはサーバー) にプッシュされます)
• patch: データを更新します (変更されたデータをバックエンドにプッシュするだけです)
• 削除：データを削除します

getリクエスト(パラメータなし)

export default {
		name:'App',
		methods:{
			getStudents(){
				axios.get('http://localhost:8080/atguigu/students').then(
					response=>{
                        //response.data  返回拿回来的数据
						console.log('请求成功了',response.data);
					},
					error=>{
                        //error.message  返回错误的原因
						console.log('请求失败了',error.message);
					}
				)
			}
	}

getリクエスト(パラメータ付き)

export default {
  name:'Search',
  data() {
	  return {
        //携带的数据
		keyWord:''  
	  }
  },
  methods:{
	  searchUsers(){
		  //发送请求  
		  axios.get(`https://api.github.com/search/users?q=${this.keyWord}`).then(
			response=>{
				console.log('请求成功了',response.data);
			},
			error=>{
				console.log('请求失败了',error.message);
			} 
		  )
	  },
  }
}

リクエストを投稿する

axios.post('/url', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });