静态页面引入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 并创建实例对象

相关推荐
一块plus4 分钟前
一门原本只是“试试水”的课程,没想到炸出了一群真诚的开发者
javascript·面试·github
yvvvy6 分钟前
🚀React + Vite 实战:打造智能单词学习应用
javascript
单休好_好就好在比双休少一天7 分钟前
Vite打包从12.17M -> 7.95M,速度提升≈51.85%
前端·javascript
yinke小琪7 分钟前
JavaScript DOM内容操作常用方法和XSS注入攻击
前端·javascript
然我10 分钟前
闭包在类封装中的神技:实现真正安全的私有属性,面试必懂的封装技巧
前端·javascript·面试
用户名12312 分钟前
Vue 页面快速跳转并打开源代码文件
javascript
爱编程的喵15 分钟前
深入理解JavaScript节流函数:从原理到实战应用
前端·javascript·html
尧木晓晓15 分钟前
开发避坑指南:Whistle 代理失效背后,localhost和 127.0.0.1 的 “爱恨情仇” 与终极解决方案
前端·javascript
Rainbow_Pearl1 小时前
Vue2_element 表头查询功能
javascript·vue.js·elementui
此乃大忽悠2 小时前
XSS(ctfshow)
javascript·web安全·xss·ctfshow