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安装与封装内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!
赞 (0)