Axios & fetch api & Promise & POST

最新推荐文章于 2025-09-10 20:18:23 发布

weixin_30319097

最新推荐文章于 2025-09-10 20:18:23 发布

阅读量114

点赞数

CC 4.0 BY-SA版权

文章标签： json javascript ViewUI

原文链接：http://www.cnblogs.com/xgqfrms/p/9951878.html

本文深入探讨了Axios和Fetch API在Vue.js中的应用，包括如何使用它们进行HTTP请求，特别是POST请求的处理。文章提供了详细的代码示例，展示了如何在Vue组件的mounted生命周期钩子中使用Axios获取数据，并对比了Axios与Fetch API的区别。

Axios & fetch api & Promise & POST

https://github.com/axios/axios

https://appdividend.com/2018/02/20/vue-js-axios-tutorial/#Vue_js_Axios_Post_Example

http://codeheaven.io/how-to-use-axios-as-your-http-client/


$ npm i -S axios

bug


    mounted() {
        console.log(`fetch data after mounted lifecycle!`);
        // let url = "http://localhost:8888/preview-user";
        // let url = "./preview-user.js";
        // let url = "./preview-user.json";
        let url = "http://10.1.5.202/es6-test/axios/preview-user.json";
        Axios.get(url)
        // .then(res => res.json())
        .then((res) => {
            let {
                data: json
            } =  res;
            console.log(`json =`, json);
            console.log(`json.data =`, json.data);
            // console.log(`res.data.data =`, res.data.data);
            // console.log(`res =`, res);
            // console.log(`res.message =`, res.message);
            // console.log(`res.data.length =`, res.data.length, JSON.stringify(res.data[0], null, 4));
        });
    },

Axios & Fetch

https://stackoverflow.com/questions/40844297/what-is-difference-between-axios-and-fetch

https://medium.com/@thejasonfile/fetch-vs-axios-js-for-making-http-requests-2b261cdd3af5

https://css-tricks.com/using-data-in-react-with-the-fetch-api-and-axios/

vue & mounted

https://stackoverflow.com/questions/32413905/initializing-vue-data-with-ajax/32443886#32443886

vue & created

https://stackoverflow.com/questions/47635503/fetch-data-with-vue-from-web-api

Ajax

Asynchronous JavaScript And XML

https://en.wikipedia.org/wiki/Ajax_(programming)

pagination


let table = new Uint8Array(100).map((item, i) => (item = i));

table.slice(0, 50);
table.slice(1*50, 1*50 + 50);

shit aliyun



fetch(url, {
    body: `nickname=xxxxx&_csrf_token=MD2ToUvQZ-3fk-g-gxczDhwiptfdRBnA57isO7wjBSE`,
    cache: "no-cache",
    credentials: "same-origin",
    // credentials: "include",
    headers: {
        "Content-Type": "application/x-www-form-urlencoded",
    },
    method: "POST",
    mode: "cors",
    redirect: "follow",
    referrer: "no-referrer",
})
.then(res => res.json())
.then(json => {
    // json
    console.log(`json =`, JSON.stringify(json, null, 4));
    return json;
})
.catch(err => console.error(`error =`, err));

shit aliyun


fetch(url, {
    body: `nickname=xxxxx&_csrf_token=MD2ToUvQZ-3fk-g-gxczDhwiptfdRBnA57isO7wjBSE`,
    cache: "no-cache",
    credentials: "same-origin",
    // credentials: "include",
    headers: {
        "Content-Type": "application/x-www-form-urlencoded",
    },
    method: "POST",
    mode: "cors",
    redirect: "follow",
    referrer: "no-referrer",
})
.then(res => res.json())
.then(json => {
    // json
    console.log(`json =`, JSON.stringify(json, null, 4));
    return json;
})
.catch(err => console.error(`error =`, err));

转载于:https://www.cnblogs.com/xgqfrms/p/9951878.html