JavaScript axios安装与封装案例详解
作者：一枕星河丶
这篇文章主要介绍了JavaScript axios安装与封装案例详解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下
1.下载axios插件
cnpm install axios -S
2.在main.js引入axios
import axios from 'axios' Vue.prototype.$http = 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安装与封装内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！