脚本宝典收集整理的这篇文章主要介绍了JavaScript axios安装与封装案例详解，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。
1.下载axios插件
cnpm install axios -s
2.在main.js引入axios
3.创建axios实例
let service = axios.create({
baseURL: baseUrl, // url = base api url + request url
wIThCredentials: true, // send cookies when cross-domain requests
timeout: 5000 // request timeout
})
4.请求拦截
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) })
5.响应拦截
// 响应拦截
service.interceptors.response.use(res =>{
// 清除loading
loading.clear()
return Promise.resolve(res)
},error =>{
loading.clear()
console.log('err'+error);
return Promise.reject(error)
})
6.抛出
// 抛出 export default service
完整代码
// 引入文件
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安装与封装内容请搜索脚本宝典以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本宝典！
以上是脚本宝典为你收集整理的JavaScript axios安装与封装案例详解全部内容，希望文章能够帮你解决JavaScript axios安装与封装案例详解所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。