JavaScript axios安裝與封裝的實(shí)例講解

本篇內(nèi)容介紹了“JavaScript axios安裝與封裝的實(shí)例講解”的有關(guān)知識(shí)，在實(shí)際案例的操作過(guò)程中，不少人都會(huì)遇到這樣的困境，接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

1.下載axios插件

cnpm install axios -S

2.在main.js引入axios

import axios from 'axios'
Vue.prototype.$http = axios

3.創(chuàng)建axios實(shí)例

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.請(qǐng)求攔截

let loading;
// 請(qǐng)求攔截
service.interceptors.request.use(config => {
 
    // loding動(dòng)畫(huà)開(kāi)啟
    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.響應(yīng)攔截

// 響應(yīng)攔截
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'
 
// 基礎(chǔ)配置
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;
// 請(qǐng)求攔截
service.interceptors.request.use(config => {
 
    // loding動(dòng)畫(huà)開(kāi)啟
    loading = Toast.loading({
        duration:10000,
        message:"加載中...",
        forbidClick:true,
    })
    //config.headers['Authorization'] = sessionStorage.getItem('token')
    return config
},error =>{
    console.log(error);
    return Promise.reject(error)
})
 
 
// 響應(yīng)攔截
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安裝與封裝的實(shí)例講解”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！