静态页面引入axios,并创建实例使用
CDN 引入 axios：
<!DOCTYPE html>
<html>
<head>
<title>使用 axios 创建实例对象</title>
</head>
<body>
<script src="http://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
// 创建一个 axios 实例对象
const instance = axios.create({
baseURL: 'http://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: 'http://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 并创建实例对象
