本文详解在 JavaScript 或 Vue 项目中集成 axios 的完整流程。从使用 cnpm 安装依赖开始，演示如何在 main.js 中引入，并重点讲解通过 axios.create 创建实例、配置 baseURL 与超时时间。同时深入解析请求与响应拦截器的编写方法，包括加载状态控制与错误处理，最终提供完整的封装代码供参考。
axios 依赖安装
首先，需要在项目中安装 axios 依赖库。推荐使用 cnpm 执行以下命令进行安装：
cnpm install axios -S全局引入与挂载
安装完成后，在项目的入口文件 main.js 中引入 axios，并将其挂载到 Vue 的原型上，以便全局使用：
import axios from 'axios'
Vue.prototype.$http = axios创建 Axios 实例
接下来，通过 axios.create 方法创建一个自定义的 axios 实例。在配置对象中，设置 baseURL 为接口基础路径，启用 withCredentials 以支持跨域携带 Cookie，并将请求超时时间设置为 5000 毫秒：
let service = axios.create({
baseURL: baseUrl, // url = base api url + request url
withCredentials: true, // send cookies when cross-domain requests
timeout: 5000 // request timeout
})配置请求拦截器
配置请求拦截器。在发送请求前，通过 Toast.loading 开启加载动画，设置持续时间为 10000 毫秒，提示文字为“加载中...”，并禁止用户点击。同时，注释掉了 Authorization 头部 token 的获取逻辑。若请求出错，则打印错误信息并返回 Promise.reject：
let loading;
// 请求拦截
service.interceptors.request.use(config => {
// loding动画开启
loading = Toast.loading({
duration:10000,
message:"加载中...",
forbidClick:true,
})
//config.headers['Authorization'] = sessionStorage.getItem('token')
return config
},error =>{
console.log(error);
return Promise.reject(error)
})配置响应拦截器
配置响应拦截器。当收到响应时，首先调用 loading.clear() 清除加载动画，然后返回 Promise.resolve(res)。若发生错误，同样清除加载动画，打印包含“err”前缀的错误信息，并返回 Promise.reject：
// 响应拦截
service.interceptors.response.use(res =>{
// 清除loading
loading.clear()
return Promise.resolve(res)
},error =>{
loading.clear()
console.log('err'+error);
return Promise.reject(error)
})导出封装实例
最后，通过 export default 将封装好的 service 实例导出，供其他模块调用：
// 抛出
export default service完整封装代码示例
以下是整合了引入、基础配置、请求拦截、响应拦截及导出的完整代码示例。代码中包含了 axios 引入、baseUrl 配置、Vant 的 Toast 组件引入，以及完整的拦截器逻辑：
// 引入文件
import axios from 'axios'
import {baseUrl} from '@/config'
import {Toast} from 'vant'
// 基础配置
let service = axios.create({
baseURL: baseUrl, // url = base api url + request url
withCredentials: true, // send cookies when cross-domain requests
timeout: 5000 // request timeout
})
let loading;
// 请求拦截
service.interceptors.request.use(config => {
// loding动画开启
loading = Toast.loading({
duration:10000,
message:"加载中...",
forbidClick:true,
})
//config.headers['Authorization'] = sessionStorage.getItem('token')
return config
},error =>{
console.log(error);
return Promise.reject(error)
})
// 响应拦截
service.interceptors.response.use(res =>{
// 清除loading
loading.clear()
return Promise.resolve(res)
},error =>{
loading.clear()
console.log('err'+error);
return Promise.reject(error)
})
// 抛出
export default service至此，关于 JavaScript 中 axios 的安装与封装案例介绍完毕。如需了解更多相关 js axios 安装与封装内容，建议搜索本站历史文章或继续浏览后续相关文章，感谢大家的支持！