首页 > 编程语言 > JavaScript axios安装与封装案例详解
2022
09-03

JavaScript axios安装与封装案例详解

1.下载axios插件

?
1
cnpm install axios -S

2.在main.js引入axios

?
1
2
import axios from 'axios'
Vue.prototype.$http = axios

3.创建axios实例

?
1
2
3
4
5
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.请求拦截

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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.响应拦截

?
1
2
3
4
5
6
7
8
9
10
// 响应拦截
service.interceptors.response.use(res =>{
    // 清除loading
    loading.clear()
    return Promise.resolve(res)
},error =>{
    loading.clear()
    console.log('err'+error);
    return Promise.reject(error)
})

6.抛出

?
1
2
// 抛出
export default service

完整代码

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
// 引入文件
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安装与封装内容请搜索自学编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持自学编程网！

编程技巧