• 静态页面引入axios,并创建实例使用


    CDN 引入 axios:

    DOCTYPE html>
    <html>
    <head>
        <title>使用 axios 创建实例对象title>
    head>
    <body>
        <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js">script>
        <script>
            // 创建一个 axios 实例对象
            const instance = axios.create({
                baseURL: 'https://jsonplaceholder.typicode.com',
                headers: {
                    'Content-Type': 'application/json'
                }
            });
    
            // 发送 GET 请求
            instance.get('/posts')
                .then(response => {
                    console.log(response.data);
                })
                .catch(error => {
                    console.error(error);
                });
    
            // 发送 POST 请求
            instance.post('/posts', { title: 'foo', body: 'bar', userId: 1 })
                .then(response => {
                    console.log(response.data);
                })
                .catch(error => {
                    console.error(error);
                });
        script>
    body>
    html>
    

    在上面的例子中,我们在静态页面中引入了 axios 的 CDN 地址,并直接使用 axios.create() 方法创建了 axios 实例对象 instance,然后发送了一个 GET 请求和一个 POST 请求。

    通过 npm 安装 axios: 如果您在项目中使用 npm 或者 yarn 管理依赖,可以通过以下命令安装 axios:

    npm install axios
    

    安装完成后,您可以使用以下方式在静态页面中创建实例对象:

    // 导入 axios
    
    import axios from 'axios';
    
    // 创建一个 axios 实例对象
    
    const instance = axios.create({
        baseURL: 'https://jsonplaceholder.typicode.com',
        headers: {
            'Content-Type': 'application/json'
        }
    });
    
    // 发送 GET 请求
    instance.get('/posts')
        .then(response => {
            console.log(response.data);
        })
        .catch(error => {
            console.error(error);
        });
    
    // 发送 POST 请求
    instance.post('/posts', { title: 'foo', body: 'bar', userId: 1 })
        .then(response => {
            console.log(response.data);
        })
        .catch(error => {
            console.error(error);
        });
    

    这样就可以在静态页面中引入 axios 并创建实例对象

  • 相关阅读:
    【趣学算法】第二章 算法之美(下)
    睡眠管理
    274. H 指数 Python
    C++Primer 16.1定义模板 习题总结
    LeetCode 0086.分隔链表
    五条小建议助力你轻松通过毕业论文查重
    常用概念-分布式系统
    shell编程初级
    使用nginx部署多个前端项目
    网站favion.ico图标
  • 原文地址:https://blog.csdn.net/qq_45089709/article/details/139424647