快捷導(dǎo)航

JavaScript axios安裝與封裝案例詳解

更新時(shí)間：2021年08月30日 14:58:26 作者：一枕星河丶

這篇文章主要介紹了JavaScript axios安裝與封裝案例詳解,本篇文章通過簡要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下

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)畫開啟
    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)畫開啟
    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

到此這篇關(guān)于JavaScript axios安裝與封裝案例詳解的文章就介紹到這了,更多相關(guān)js axios安裝與封裝內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: