在原生JavaScript中引入axios，需要通过以下几个步骤来完成。
-
下载axios库。可以从官方的GitHub仓库下载axios的源代码，然后将其添加到项目中。也可以通过npm安装axios库，使用
npm install axios命令来完成安装。 -
引入axios库。在HTML文件中使用
<script>标签来引入axios的源代码文件，或者在JavaScript文件中使用import语句来引入axios库。
代码示例：
<script src="path/to/axios.min.js"></script>
或
import axios from 'axios';
- 使用axios发送HTTP请求。axios提供了丰富的API来发送HTTP请求，可以发送GET、POST、PUT、DELETE等类型的请求，并且支持Promise和async/await等方式来处理返回的结果。
代码示例：
// 发送GET请求
axios.get('/api/data')
.then(function (response) {
console.log(response.data);
})
.catch(function (error) {
console.log(error);
});
// 发送POST请求
axios.post('/api/data', { name: 'John', age: 30 })
.then(function (response) {
console.log(response.data);
})
.catch(function (error) {
console.log(error);
});
在以上示例中，我们使用axios的get和post方法来发送GET和POST请求，并通过.then和.catch方法分别处理请求成功和失败的情况。
- 设置请求头和请求参数。axios提供了一些方法来设置请求头和请求参数，可以使用
axios.defaults.headers来设置全局的请求头，也可以在每个请求中单独设置请求头。
代码示例：
// 设置全局请求头
axios.defaults.headers.common['Authorization'] = 'Bearer TOKEN';
// 发送带有请求参数的请求
axios.get('/api/data', {
params: {
id: 1,
name: 'John'
}
})
.then(function (response) {
console.log(response.data);
})
.catch(function (error) {
console.log(error);
});
在以上示例中，我们使用axios.defaults.headers.common来设置全局的请求头，然后在GET请求中使用params参数来设置请求参数。
- 处理响应结果。axios返回的响应结果包含了很多信息，包括状态码、响应头和响应数据等。可以通过链式调用的方式来处理返回的结果。
代码示例：
axios.get('/api/data')
.then(function (response) {
console.log(response.status); // 输出状态码
console.log(response.headers); // 输出响应头
console.log(response.data); // 输出响应数据
})
.catch(function (error) {
console.log(error);
});
在以上示例中，我们使用response.status来获取返回的状态码，response.headers来获取返回的响应头，response.data来获取返回的响应数据。
以上就是在原生JavaScript中引入axios的步骤和示例代码。通过下载axios库、引入库文件、使用axios发送HTTP请求、设置请求头和请求参数、处理响应结果等步骤，我们可以方便地在原生JavaScript中使用axios来进行网络请求。
