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

CDN 引入 axios:

html 复制代码
<!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:

javascript 复制代码
npm install axios

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

javascript 复制代码
// 导入 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 并创建实例对象

相关推荐
徊忆羽菲21 分钟前
Echarts3D柱状图-圆柱体-文字在柱体上垂直显示的实现方法
javascript·ecmascript·echarts
轻语呢喃31 分钟前
JavaScript :字符串模板——优雅编程的基石
前端·javascript·后端
coding随想44 分钟前
JavaScript中的BOM:Window对象全解析
开发语言·javascript·ecmascript
難釋懷1 小时前
TypeScript-webpack
javascript·webpack·typescript
Rockson1 小时前
使用Ruby接入实时行情API教程
javascript·python
前端小巷子2 小时前
Web开发中的文件上传
前端·javascript·面试
上单带刀不带妹3 小时前
手写 Vue 中虚拟 DOM 到真实 DOM 的完整过程
开发语言·前端·javascript·vue.js·前端框架
前端风云志3 小时前
typescript结构化类型应用两例
javascript
gnip4 小时前
总结一期正则表达式
javascript·正则表达式
爱分享的程序员4 小时前
前端面试专栏-算法篇:18. 查找算法(二分查找、哈希查找)
前端·javascript·node.js