1.下載axios外掛

cnpm install axios -S

2.在main.引入axios

import axios from 'axios'
.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 shttp://www.cppcns.comervice

完整程式碼

// 引入檔案
import axios from 'axios'
import {baseUrl} from '@/config'
import {Toast} from 'vant'
 
// 基礎配置
let service = axios.create({
    baseURL: baseUrl,// send cookies when cross-domain requests
    timeout: 5000 // request timeout
})
 
let loading;
// 請求攔截
service.interceptors.request.use(config => {
 
    // loding動畫開啟
    loading = Toast.loading({
        duratitrwUxh
 
on:10000,forbidClick:ttrwUxhrue,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

到此這篇關於 axios安裝與封裝案例詳解的文章就介紹到這了,更多相關js axios安裝與封裝內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！