实现“axios 设置token”
1. 整体流程
为了实现“axios 设置token”，我们需要按照以下流程来操作：
| 步骤 | 操作 |
|---|---|
| 1 | 创建一个 Axios 实例 |
| 2 | 设置请求拦截器 |
| 3 | 在请求拦截器中添加 token |
| 4 | 发送请求 |
接下来，我们将一步步地讲解每个步骤的具体操作和代码。
2. 创建 Axios 实例
首先，我们需要在项目中安装并引入 Axios。可以通过以下命令安装 Axios：
npm install axios
安装完成后，在项目的入口文件或需要使用 Axios 的地方引入它：
import axios from 'axios';
创建 Axios 实例的代码如下：
const instance = axios.create({
baseURL: ' // 设置请求的基础地址
timeout: 5000, // 设置请求超时时间
});
在上面的代码中，我们创建了一个名为 instance 的 Axios 实例，并通过 create 方法传入了一些配置项，包括 baseURL 和 timeout。其中，baseURL 是请求的基础地址，可以根据实际情况进行修改；timeout 是请求的超时时间，单位为毫秒。
3. 设置请求拦截器
请求拦截器可以在发送请求之前对请求进行一些处理，例如添加请求头、身份验证等。我们可以通过 instance.interceptors.request.use 方法来设置请求拦截器。
在请求拦截器中，我们需要判断是否存在 token，并将其添加到请求头中。
instance.interceptors.request.use(
function (config) {
const token = localStorage.getItem('token'); // 从本地存储中获取 token
if (token) {
config.headers.Authorization = `Bearer ${token}`; // 将 token 添加到请求头中
}
return config;
},
function (error) {
return Promise.reject(error);
}
);
在上面的代码中，我们使用了 localStorage.getItem 方法从本地存储中获取了名为 token 的值，并将其添加到请求头的 Authorization 字段中。需要注意的是，这里使用了 Bearer Token 的认证方式，你可以根据实际情况进行修改。
4. 发送请求
经过前面的步骤，现在我们已经成功地设置了 token，并添加到了请求头中。接下来，我们可以使用 Axios 实例来发送请求了。
instance.get('/api/data')
.then(function (response) {
console.log(response.data);
})
.catch(function (error) {
console.error(error);
});
在上面的代码中，我们使用 instance.get 方法发送了一个 GET 请求，请求的地址为 /api/data。你可以根据实际情况进行修改，例如使用 instance.post 发送 POST 请求等。
完整代码
下面是完整的代码示例，包括创建 Axios 实例、设置请求拦截器和发送请求的部分。
import axios from 'axios';
const instance = axios.create({
baseURL: ' // 设置请求的基础地址
timeout: 5000, // 设置请求超时时间
});
instance.interceptors.request.use(
function (config) {
const token = localStorage.getItem('token'); // 从本地存储中获取 token
if (token) {
config.headers.Authorization = `Bearer ${token}`; // 将 token 添加到请求头中
}
return config;
},
function (error) {
return Promise.reject(error);
}
);
instance.get('/api/data')
.then(function (response) {
console.log(response.data);
})
.catch(function (error) {
console.error(error);
});
总结
通过以上步骤，我们成功地实现了“axios 设置token”的功能。首先，我们创建了一个 Axios 实例，并进行了一些基本的配置；然后，我们设置了请求拦截器，在其中判断是否存在 token，并将其添加到请求头中；最后，我们使用 Axios 实例发送了一个请求。这样，我们就可以在请求中带上 token 了。
希望这篇文章对你有所帮助！如果有任何疑问，欢迎提出。
