009.Fetch API和axios

Fetch API概念

Fetch API是XMLHttpRequest的升级版,用于在 JavaScript 脚本里面发出 HTTP 请求。

  • 浏览器原生提供这个对象。

    image-20231212103522046

基本用法

在用法上,fetch接受一个url字符串作为参数,

  • 默认向该网址发出GET请求,返回一个 Promise 对象。

  • 语法

    1
    2
    3
    fetch(url字符串)
    .then(...)
    .catch(...)
  • 🔥案例

    1. GET 请求

      1. 接收一个可读的数据流。

        1
        2
        3
        <div id="box">
        <button @click="handleFetch">ajax-fetch</button>
        </div>
        1
        2
        3
        4
        5
        6
        7
        8
        9
        10
        11
        12
        new Vue({
        el: "#box",
        methods: {
        handleFetch() {
        fetch("./json/maizuo.json")
        .then(res => {
        console.log(res)
        })
        .catch(err => console.log('Request Failed', err))
        }
        }
        })

        image-20231212105356516

        • 🔔提示
          1. 当你使用 Fetch API 发出请求时,
            • 返回的{第一个Response对象}包含的是{状态码、响应头等}并不是真正的数据。
          2. ReadableStream ➾ 表示一个可读的数据流。
      2. 接收真正的数据 ➾ res.json()

        1
        2
        3
        <div id="box">
        <button @click="handleFetch">ajax-fetch</button>
        </div>
        1
        2
        3
        4
        5
        6
        7
        8
        9
        10
        11
        12
        13
        new Vue({
        el: "#box",
        methods: {
        handleFetch() {
        fetch("./json/maizuo.json")
        .then(res => res.json())
        .then(res => {
        console.log(res)
        })
        .catch(err => console.log('Request Failed', err))
        }
        }
        })
        image-20231213101918189
        • 🔔提示
          • res.json()是一个异步操作,取出所有数据,并将其转为 JSON 对象。
    2. POST请求

      1. "Content‐Type": "application/json"

        1
        2
        3
        4
        5
        6
        7
        8
        9
        10
        11
        12
        13
        14
        new Vue({
        el: "#box",
        methods: {
        handleFetch() {
        fetch("https://m.vip.com/server.html?rpc&method=pageCache&f=www&_=1563946036520", {
        method: 'post',
        headers: {
        "Content‐Type": "application/x‐www‐form‐urlencoded"
        },
        body: "name=kerwin&age=100",
        }).then(res => res.json()).then(res => { console.log(res) });
        }
        }
        })
      2. "Content‐Type": "application/x‐www‐form‐urlencoded"

        1
        2
        3
        4
        5
        6
        7
        8
        9
        10
        11
        12
        13
        14
        15
        16
        17
        new Vue({
        el: "#box",
        methods: {
        handleFetch() {
        fetch("https://m.vip.com/server.html?rpc&method=pageCache&f=www&_=1563946036520", {
        method: 'post',
        headers: {
        "Content‐Type": "application/json"
        },
        body: JSON.stringify({
        name: "kerin",
        age: 100
        })
        }).then(res => res.json()).then(res => { console.log(res) });
        }
        }
        })

Fetch API应用

  1. html

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <div id="box">
    <button @click="handleFetch">ajax-fetch</button>

    <ul>
    <li v-for="data in datalist" :key="data.filmId">
    <img :src="data.poster" />
    {{data.name}}
    </li>
    </ul>
    </div>
  2. maizuo.json

    image-20231214102620101
  3. JavaScript

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    new Vue({
    el: "#box",
    data: {
    datalist: []
    },
    methods: {
    handleFetch() {
    fetch("./json/maizuo.json")
    .then(res => res.json())
    .then(res => {
    this.datalist = res.data.films
    })
    .catch(err => {
    console.log(err)
    })
    }
    }
    })

    gif-231214103048

axios API概念

axios API应用

1
2
3
4
5
6
7
8
9
10
<div id="box">
<button @click="handleAjax">ajax-axios</button>

<ul>
<li v-for="item in datalist" :key="item.id">
<img :src="handleImg(item.img)" />
{{item.nm}}
</li>
</ul>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
new Vue({
el: "#box",
data: {
datalist: []
},
methods: {
handleAjax() {
axios.get("./json/maoyan.json").then(res => {
this.datalist = res.data.movieList
})
},

handleImg(url) {
return url.replace('w.h/', '') + '@1l_1e_1c_128w_180h'
}
}
})

gif-231214104716