要编写并生效Axios拦截器,可以按照以下步骤进行操作:
1.创建一个文件:在你的项目中,创建一个新的JavaScript文件,例如interceptors.js,用于编写拦截器代码。
2.导入所需的库和模块:在interceptors.js文件中,导入所需的Axios库和其他依赖项。
import axios from 'axios';
// 其他依赖项的导入
3.创建Axios实例:使用Axios库创建一个自定义的Axios实例,可以在创建实例时配置默认的请求参数。
const instance = axios.create({
baseURL: 'https://api.example.com', // 设置基础URL
timeout: 5000, // 设置请求超时时间
// 其他配置参数...
});
4.添加请求拦截器:通过调用instance.interceptors.request.use()方法,添加一个请求拦截器。
// request拦截器
instance.interceptors.request.use(config => {
console.log("请求拦截器",config)
// 从sessionStorage获取token
const token = sessionStorage.getItem('usertoken');
// 如果token存在,则在请求头中添加Authorization字段
if (token) {
config.headers.Authorization = token;
}
// get请求映射params参数
if (config.method === 'get' && config.params) {
let url = config.url + '?';
for (const propName of Object.keys(config.params)) {
const value = config.params[propName];
var part = encodeURIComponent(propName) + "=";
if (value !== null && typeof(value) !== "undefined") {
if (typeof value === 'object') {
for (const key of Object.keys(value)) {
let params = propName + '[' + key + ']';
var subPart = encodeURIComponent(params) + "=";
url += subPart + encodeURIComponent(value[key]) + "&";
}
} else {
url += part + encodeURIComponent(value) + "&";
}
}
}
url = url.slice(0, -1);
config.params = {};
config.url = url;
}
return config
}, error => {
Promise.reject(error)
})
// 响应拦截器
service.interceptors.response.use(res => {
console.log('---响应拦截器---', res);
if (res.data.code === 0 || res.status === 401) {
// 返回登录页面
window.top.location.href = '/front/page/login.html';
} else {
return res.data;
}
},
error => {
let { message } = error;
if (message == "Network Error") {
message = "后端接口连接异常";
}
// 状态码报错属于error不是响应拦截器能够使用的
else if (error.response && error.response.status === 401) {
// 返回登录页面
window.top.location.href = '/front/page/login.html';
}
else if (message.includes("timeout")) {
message = "系统接口请求超时";
}
else if (message.includes("Request failed with status code")) {
message = "系统接口" + message.substr(message.length - 3) + "异常";
}
window.vant.Notify({
message: message,
type: 'warning',
duration: 5 * 1000
})
//window.top.location.href = '/front/page/no-wify.html'
return Promise.reject(error)
})
5.添加响应拦截器:通过调用instance.interceptors.response.use()方法,添加一个响应拦截器。
instance.interceptors.response.use(response => {
// 对响应数据做些什么
// 例如处理错误状态码、解析数据等
return response.data;
}, error => {
// 对响应错误做些什么
return Promise.reject(error);
});
6.导出Axios实例:在interceptors.js文件的末尾,导出包含拦截器的Axios实例。
export default instance;
7.在需要使用拦截器的文件中导入并使用:在你的其他文件中(例如主应用程序文件或用于发起请求的地方),导入包含拦截器的Axios实例,并使用它进行网络请求。
import axiosInstance from './interceptors';
axiosInstance.get('/api/example')
.then(response => {
// 处理成功的响应
})
.catch(error => {
// 处理错误的响应
});
通过以上步骤,你将能够创建自定义的Axios拦截器并使其生效。你需要创建一个叫做interceptors.js的文件,其中包括创建Axios实例、添加请求和响应拦截器的代码,并将Axios实例导出。然后,在需要使用拦截器的文件中导入interceptors.js文件,并使用导入的Axios实例进行请求操作。这样,拦截器将在请求发送和响应返回时生效,并执行预定义的逻辑。
演示流程
当然!下面是一个简单的Axios拦截器的示例:
import axios from ‘axios’;
// 创建一个axios实例
const instance = axios.create({
baseURL: 'https://api.example.com', // 设置基础URL
timeout: 5000, // 设置请求超时时间
});
// 请求拦截器
instance.interceptors.request.use(config => {
// 在发送请求之前做些什么
// 例如添加认证头部信息、设置loading状态等
console.log('请求拦截器');
// 必须有返回config,不然请求无法发送
return config;
}, error => {
// 对请求错误做些什么
console.error('请求拦截器错误', error);
return Promise.reject(error);
});
// 响应拦截器
instance.interceptors.response.use(response => {
// 对响应数据做些什么
// 例如处理错误状态码、解析数据等
console.log('响应拦截器');
// 必须有返回response,不然无法在then里接收到响应
return response;
}, error => {
// 对响应错误做些什么
console.error('响应拦截器错误', error);
return Promise.reject(error);
});
export default instance;
以上代码创建了一个具有请求拦截器和响应拦截器的Axios实例。在请求拦截器中,可以添加一些共同的请求处理逻辑,例如添加认证头部信息或设置loading状态。在响应拦截器中,可以处理响应数据,例如解析数据或处理错误状态码。你可以根据需要,在拦截器中添加更多的逻辑和自定义处理。
你可以将以上代码保存为一个文件(例如interceptors.js),然后在需要使用Axios的地方导入该文件,例如:
import axiosInstance from './interceptors';
axiosInstance.get('/api/example')
.then(response => {
// 处理成功的响应
})
.catch(error => {
// 处理错误的响应
});
这样,你的Axios拦截器就会生效,并在发起请求和处理响应时执行相应的逻辑。