JavaScript|JavaScript axios安装与封装案例详解 JavaScriptaxios安装与封装案例详

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 urlwithCredentials: true, // send cookies when cross-domain requeststimeout: 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)})

【JavaScript|JavaScript axios安装与封装案例详解】5.响应拦截

// 响应拦截service.interceptors.response.use(res =>{// 清除loadingloading.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 urlwithCredentials: true, // send cookies when cross-domain requeststimeout: 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 =>{// 清除loadingloading.clear()return Promise.resolve(res)},error =>{loading.clear()console.log('err'+error); return Promise.reject(error)}) // 抛出export default service

到此这篇关于JavaScript axios安装与封装案例详解的文章就介绍到这了,更多相关js axios安装与封装内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！