在ES6生成器中使用axios拦截器,首先需要确保已经安装了axios库。如果尚未安装,可以使用以下命令进行安装:
npm install axios
接下来,你可以在生成器函数中使用axios拦截器。以下是一个示例:
import axios from 'axios';
// 添加请求拦截器
axios.interceptors.request.use(
function (config) {
// 在发送请求之前做些什么,例如添加token
const token = localStorage.getItem('token');
if (token) {
config.headers.Authorization = `Bearer ${token}`;
}
return config;
},
function (error) {
// 对请求错误做些什么
return Promise.reject(error);
}
);
// 添加响应拦截器
axios.interceptors.response.use(
function (response) {
// 对响应数据做点什么
return response;
},
function (error) {
// 对响应错误做点什么
if (error.response.status === 401) {
console.log('Unauthorized, redirecting...');
}
return Promise.reject(error);
}
);
function* myGenerator() {
try {
const response = yield axios.get('https://api.example.com/data');
console.log(response.data);
} catch (error) {
console.error('Error fetching data:', error);
}
}
// 使用co库来处理生成器
import co from 'co';
co(myGenerator);
在这个示例中,我们首先导入了axios库,并设置了请求和响应拦截器。然后,我们创建了一个名为myGenerator
的生成器函数,它使用yield
关键字等待axios请求的结果。最后,我们使用co库来处理生成器,这样就可以正确处理异步操作。
注意:在现代JavaScript中,通常建议使用async/await
而不是生成器来处理异步操作。async/await
语法更简洁,易于理解和维护。以下是使用async/await
的示例:
import axios from 'axios';
// ...(请求和响应拦截器的设置)
async function fetchData() {
try {
const response = await axios.get('https://api.example.com/data');
console.log(response.data);
} catch (error) {
console.error('Error fetching data:', error);
}
}
fetchData();
领取专属 10元无门槛券
手把手带您无忧上云