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安裝與封裝的實例講解”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！