JavaScript axios安装与封装案例详解

时间：2022-06-07 09:21:06|栏目：JavaScript代码|点击：次

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代码

下一篇：基于javascript代码实现通过点击图片显示原图片

本文标题：JavaScript axios安装与封装案例详解

本文地址：http://www.codeinn.net/misctech/204034.html

更多JavaScript代码

JavaScript代码

JavaScript axios安装与封装案例详解

阅读排行

推荐教程