? ? ? ? 本篇就開始講到關(guān)于請求的內(nèi)容了，當(dāng)然關(guān)于 Vue 的大部分還是會想到axios，因為這是官方推薦用的，了解 Vue 的知道在axios之前還有一個vue-resource，后來也由于作者尤雨溪聲明vue-resource 已經(jīng)不維護了，推薦使用這個axios，那么在此之前先來講在這個fetch，為什么呢？因為它正是W3C的正式標(biāo)準(zhǔn)，即在任何頁面當(dāng)中不需要引入任何庫，就可以直接來使用的；原生的XHR(XMLHttpRequest)是一個設(shè)計簡陋的API，配置調(diào)用方式較為混亂，基于事件的異步不友好，且兼容性不好；那么就有了一套新的標(biāo)準(zhǔn) —— fetch ；

打開控制臺Network可以看到能夠過濾出Fetch和XHR的請求；

既然fetch是 W3C 的一套標(biāo)準(zhǔn)，那么先來簡單講fetch的一個基本使用和操作；

fetch

點擊 "按鈕" 時進行fetch請求數(shù)據(jù)：

????????那么請求的數(shù)據(jù)去哪里弄呢？先來模擬一下用json數(shù)據(jù)，先在目錄下創(chuàng)建一個 fetch.json的一個文件，并能夠訪問到fetch.json；

// 模擬的json數(shù)據(jù)
{
	"name":"zs",
	"age":18
}

Live Server

? ? ? ? 這里需要安裝一個小工具，一個具有實時加載功能的小型服務(wù)器 live-server，這里用的是vscode 編譯器；

?????????安裝完成之后下次可以右鍵點擊【open with server】，這樣一來就能當(dāng)都將我們的靜態(tài)文件運行起來，就像一個臨時的開發(fā)環(huán)境；

get 請求?

? ? ? ? ?編寫button的點擊事件發(fā)送請求，返回輸出在控制臺上；

methods:{
    handleClick(){
        fetch("fetch.json")
            .then(res=>{console.log(res);})
    }
}

? ? ? ? 那么我想獲取的是剛剛模擬在json當(dāng)中的數(shù)據(jù)；如何拿到呢？將拿到的res進行res.json()，把它轉(zhuǎn)成json對象

handleClick(){
    fetch("fetch.json")
        .then(res=>res.json())  // .then(res=>{return res.json()})
            .then(res=>{console.log(res);})
}

? ? ? ? ?res.json ？ 那么用res.text ?

res.json() 拿到的是json數(shù)據(jù) ；res.text() 拿到的是字符串?dāng)?shù)據(jù)；

以上是get請求的內(nèi)容，默認就是get請求所以可以不用添加method:get，如果要添加怎么寫？

handleClick(){
    fetch("fetch.json",{method:'GET'})
        .then(res=>res.json())
            .then(res=>{console.log(res);})
}

post 請求

? ? ? ? ?我們知道get和post請求方式不同，get請求后端只有一種接收的方式，即將上述代碼換成fetch( "fetch.json?name=zs&age=18" )，可以在瀏覽器過濾看到：

????????但 post 就不一樣了，post 就有兩種方式，這是發(fā)送的時候就需要告訴后端我們傳的是什么編碼格式，一種是 application/x-www-form-urlencoded，還有一種是 application/json ，那么將我們的數(shù)據(jù)放在body里面，先來第一種的 post 寫法：

application/x-www-form-urlencoded

handleClick(){
    fetch("請求地址",{
            method:'POST', // 請求方式
            headers:{ "Content-Type":"application/x-www-form-urlencoded" },
            body:"name=li&age=18"
        },
    )
        .then(res=>res.json())
            .then(res=>{console.log(res);})
}

?application/json

handleClick(){
    fetch("請求地址",{
            method:'POST', // 請求方式
            headers:{ "Content-Type":"application/json" },
            body: JSON.stringify({
                name:"zs",
                age:18
            })
        },
    )
        .then(res=>res.json())
            .then(res=>{console.log(res);})
}

注意：fetch請求默認是不帶有cookie的，需要設(shè)置fetch(url，credentials:'include'})

fetch 小用一下

? ? ? ? ?這里就用fetch去請求模擬的數(shù)據(jù)回來，然后將數(shù)據(jù)渲染到我們的頁面上來；

json數(shù)據(jù)：

{
	"List":[
		{
			"id":1,
			"name":"艾米",
			"age":18,
			"headImg":"https://img2.baidu.com/it/u=2872801224,2270670435&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
		},
		{
			"id":2,
			"name":"邁克",
			"age":18,
			"headImg":"https://img0.baidu.com/it/u=454473805,1428077160&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
		},
		{
			"id":3,
			"name":"莉莎",
			"age":18,
			"headImg":"https://img0.baidu.com/it/u=91867198,3957775187&fm=253&fmt=auto&app=138&f=JPEG?w=506&h=500"
		}
	]
}

?通過fetch按鈕的點擊獲取到模擬的List當(dāng)中的數(shù)據(jù)，接下來對數(shù)據(jù)進行處理渲染；

<div id="app">
    <button @click="handleClick">fetch</button>

    <div class="info" v-for="item in List" :key="item.id">
        <img :src="item.headImg" alt="img">
        <p>名字：{{item.name}}</p>
        <p>年齡： {{item.age}}</p> 
    </div>

</div>
<script>
    new Vue({
        el:'#app',
        data:{
            List:[]
        },
        methods:{
            handleClick(){
                fetch("fetch.json",{method:'GET'})
                    .then(res=>res.json())
                        .then(res=>{
                            this.List = res.List
                            console.log(this.List)
                        })
            }
        }
    })
</script>

? ? ? ? ?本篇內(nèi)容就是記錄fetch的一個基本內(nèi)容以及了解fetch，下篇內(nèi)容可能會講到這個axios的使用，喜歡和在學(xué)的可以了解一下然后可以對比 fetch 和 axios ！

文章來源地址http://www.zghlxwxcb.cn/news/detail-494633.html

到了這里，關(guān)于第十九篇 fetch請求的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！