Vueで使用できるいくつかのネットワークリクエストメソッドを要約します

## 1、XMLHttpRequest

ブラウザはXMLHttpRequestオブジェクトのサポートが不十分です。XMLHttpRequestオブジェクトを作成するときは、IEブラウザと互換性がある必要があります。
：XHR

readyState
- 0〜4、0は初期化されていないことを意味し、4はリクエストが完了したことを意味します
status（HTTP応答ステータスコード）
- 200：OK、成功
- 3XX【リダイレクトシリーズのステータスコード】
  - 301：永続的なリダイレクト
  - 302：一時的なリダイレクト
  - 307：内部ブラウザ（キャッシュ）リダイレクト
- 4XX【エラーシリーズ】
  - 400：悪いリクエスト、悪いリクエスト
  - 401：認証に失敗しました
  - 403禁止します
  - 404：対応するリソースが見つかりません
  - 405：メソッドは許可されていません
- 5XX【サーバーエラー、環境問題】
  - 500：内部サーバーエラー（コード、環境問題）
  - 502：悪いGetway、悪いゲートウェイ

ケース：XHRを使用して、国立大学のデータインターフェースをリクエストします

インターフェイスアドレス
- https://api.i-lynn.cn/college
- list情報をループで表示するだけ
- インターフェースはドメイン間で直接リクエストできます
ケース効果

大学のデータ

参照コード：

<body>
    <div id="app">
        <ul>
            <li :key='index' v-for='(el,index) in list'>{
   
   {el.area}}：{
   
   {el.counts}}所</li>
        </ul>
    </div>
</body>

<script src="./js/vue.js"></script>
<script>
    new Vue({
     
     
        el: '#app',
        data: {
     
     
            list: []
        },
        mounted: function(){
     
     
            // 1. 创建xhr对象
            var xhr = new XMLHttpRequest()
            const api = 'https://api.i-lynn.cn/college'
            // 2. 绑定回调函数
            xhr.onreadystatechange = () => {
     
     
                // 3. 判断是否成功
                if(xhr.readyState == 4 && xhr.status == 200){
     
     
                    this.list = JSON.parse(xhr.responseText).list
                }
            }
            // 4. 打开请求
            xhr.open('GET',api)
            // xhr.open('POST',api)
            // 设置请求头
            // xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
            // 5. 发送请求
            xhr.send()
            // xhr.send("username=111&age=222")
        }
    })
</script>

2、jQuery

jQueryクラスの導入により、互換性の記述の問題が解決されましたが、現在はjQueryライブラリのネットワークリクエスト関数のみが使用され、jQueryの多数のdomメソッドが無効に導入されています。これは少しやり過ぎです。

基本的な文法

$.ajax({
    
    
	url,
	type:get/post,
	data,
	dataType:json/text/xml/html/jsonp
	success:function(res){
    
    },
	error:function(){
    
    }
})

$.get(url,data,callback,dataType)

$.post(url,data,callback,dataType)

jQueryを使用しXHRてケースの一部を書き直します

<body>
    <div id="app">
        <ul>
            <li :key="index" v-for="(el,index) in list">
                {
   
   {el.area}}：{
   
   {el.counts}}所
            </li>
        </ul>
    </div>
</body>

<script src="./js/vue.js"></script>
<script src="./js/jquery-3.5.1.js"></script>
<script type="text/javascript">
    const vm = new Vue({
     
     
        el: "#app",
        data: {
     
     
            list: [],
        },
        async mounted() {
     
     
            const api = "https://api.i-lynn.cn/college";
            let data = await $.get(api,"json");
            this.list = data.list;
        },
    });
</script>

async：キーワード。関数宣言キーワードのfunction前に、現在の関数を非同期関数としてマークするために使用されます

await：keyword、現在のキーワードのラインコードを実行し、結果に達するまで待ってから次のコードを実行します

3、フェッチ

HTML5が提供する組み込みAPI
よりシンプルなデータ収集方法、より強力で柔軟な方法は、xhrのアップグレードバージョンと見なすことができます
約束に基づく
Fetchは多くのリクエストメソッドをサポートしていますが、デフォルトはGETリクエストです。他のメソッドを使用する必要があるmethod場合は、2番目のオプションパラメータのオプションを使用して指定できます。

文法構造

fetch(url[,some settings]).then(fn2)
		  .then(fn3)
		  ...
          .catch(fn)

使用例

// 通过url表达式来传递数据
fetch("http://xxx/?id=123")
    .then(res => res.json())
    .then(data => console.log(data));

// post标准提交
fetch("http://xxxx/post", {
    
    
    method: "post",
    body: "uname=lisi&pwd=123",
    headers: {
    
    
        "Content-Type": "application/x-www-form-urlencoded",
    },
	})
    .then(res => res.json())
    .then(data => console.log(data));

// post提交json数据
fetch("http://localhost:3000/books", {
    
    
    method: "post",
    body: JSON.stringify({
    
    
        uname: "tianqin",
        pwd: "1201",
    }),
    headers: {
    
    
        "Content-Type": "application/json",
    },
	})
    .then(res => res.json())
    .then(data => console.log(data));

注：フェッチはCookieを送信しません。資格情報の初期化オプションを使用しない限りcredentials: "include"

上記のコード例json()では、フェッチの応答結果処理メソッドであるメソッドがあることがわかります。フェッチの一般的に使用される応答結果処理メソッドは次のとおりです。

text（）：返された本文を文字列型に処理します
json（）：返される結果はJSON.parse（responseText）と同じです

XHRいくつかのケースを書き直すためにfetchメソッドを使用する

<body>
    <div id="app">
        <ul>
            <li :key='index' v-for='(el,index) in list'>
                {
   
   {el.area}}：{
   
   {el.counts}}所
            </li>
        </ul>
    </div>
</body>

<script src="./js/vue.js"></script>
<script type="text/javascript">
    const vm = new Vue({
     
     
        el: '#app',
        data: {
     
     
            list: []
        },
        async mounted() {
     
     
            const api = "https://api.i-lynn.cn/college"
            let res = await fetch(api)
            let data = await res.json()
            this.list = data.list
        }
    })
</script>

プリフライトリクエスト

非同期リクエストが従来とはGET異なるANDのPOST場合、ブラウザは最初にインターフェースアドレスにリクエストを送信して、現在のサーバーがリクエストタイプ（リクエスト動詞）をサポートしているかどうかを確認します。サポートしている場合は、引き続き非同期リクエストを送信します。それ以外の場合は送信されません。

次に、この事前送信された要求はと呼ばれ预检请求、その要求動詞はOPTIONSです。

学習の後半PUT、DELETEおよびその他の特別な要求は、動詞のプリフライト要求をトリガーします。

プリフライトリクエスト動詞

4、axios

### 4.1、基本的な使い方

ドキュメント：https：//www.kancloud.cn/yunye/axios/234845

axiosは、ブラウザとnode.jsで使用できるpromiseベースのHTTPライブラリです。axiosは、vueの作成者が推奨するネットワークリクエストライブラリです。次の特徴があります。

ブラウザとnode.jsをサポートする
サポートの約束
傍受できる请求和响应
jsonデータを自動的に変換します

axiosブラウザのサポート

axiosの互換性

axiosを使用する前に、対応するテンプレートファイルにaxios jsライブラリファイルを導入してから、次の使用法に従ってaxiosを使用する必要があります。

// GET请求方式
axios.get('/get_data?id=10010').then(ret => console.log(ret.data))

axios.get('/get_data',{
    
    
    params: {
    
    
        id: 10010,
        name: 'tianqin',
        age: 21
    }
}).then(ret => console.log(ret.data))

//POST请求方式
axios.post('/set_data', {
    
    
  	firstName: 'zhang',
  	lastName: 'san'
}).then(ret => {
    
     })

axios({
    
    
  	method: 'post',
  	url: 'set_data',
  	timeout: 1000,
  	headers: {
    
    'X-Custom-Header': 'foobar'},
  	data: {
    
    
    	firstName: 'tian',
    	lastName: 'qin'
  	}
}).then(ret => {
    
     })

もちろんaxiosのに加えて、伝統的な支援GETとPOST道を越えての、方法はまた、共通の要求をサポートしています。

置く：データを変更する
削除：データを削除します

上記のaxiosリクエストの例を例にとるretと、axiosレスポンスの結果（）の主な属性は次のとおりです。

データ：実際の応答データ（最も一般的に使用される）
ヘッダー：応答ヘッダー情報
ステータス：レスポンスステータスコード
statusText：応答ステータス情報

さらに、axiosを使用してリクエストを送信する前に、グローバル構成を介していくつかの設定を行うことができることに注意してください。これにより、次のような後続のリクエスト操作が容易になります。

axios.defaults.timeout = 3000【タイムアウト時間を設定】
axios.defaults.baseURL = 'http：// localhost / app' [デフォルトのアドレスを設定]
axios.defaults.headers ['_ token'] = '123123123' [リクエストヘッダー情報、一般ヘッダー情報を設定]
- axios.defaults.headers.get ['_ token'] = '123123'
- axios.defaults.headers.post ['_ token'] = '123123'
- axios.defaults.headers.common ['_ token'] = '123123' [共通のヘッダー情報、共通の書き込みはできません]

注意：

axiosがPOSTリクエストを送信すると、デフォルトでjson形式のデータが送信されます

投稿フォームリクエストを送信する必要がある場合は、リクエストヘッダーを指定する必要があります
axios.post('college',{
     
     
    username: 'tianqin',
    age: 21
},{
     
     
    headers: {
     
     
        "Content-Type": "application/x-www-form-urlencoded"
    }
}).then(ret => this.list = ret.data.list)

axiosを使用してXHRいくつかのケースを書き直します

<!-- 以GET形式为例 -->
<body>
    <div id="app">
        <ul>
            <li :key='index' v-for='(el,index) in list'>
                {
   
   {el.area}}：{
   
   {el.counts}}所
            </li>
        </ul>
    </div>
</body>

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="./js/vue.js"></script>
<script type="text/javascript">
    const vm = new Vue({
     
     
        el: '#app',
        data: {
     
     
            list: []
        },
        mounted() {
     
     
            const api = "https://api.i-lynn.cn/college"
            axios.get(api).then(ret => console.log(ret.data.list))
        }
    })
</script>