Detailed explanation of JavaScript axios installation and packaging case

1. Download the axios plugin

cnpm install axios -S

2. Introduce axios in main.js

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

3. Create an axios instance

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. Request Interception

let loading;
// Request interception service.interceptors.request.use(config => {
 
    // start the loding animation loading = Toast.loading({
        duration:10000,
        message: "Loading...",
        forbidClick:true,
    })
    //config.headers['Authorization'] = sessionStorage.getItem('token')
    return config
},error =>{
    console.log(error);
    return Promise.reject(error)
})

5. Response Interception

// Response interception service.interceptors.response.use(res =>{
    // Clear loading
    loading.clear()
    return Promise.resolve(res)
},error =>{
    loading.clear()
    console.log('err'+error);
    return Promise.reject(error)
})

6. Throw

// Throw export default service

Complete code

// Import fileimport axios from 'axios'
import {baseUrl} from '@/config'
import {Toast} from 'vant'
 
// Basic configuration 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;
// Request interception service.interceptors.request.use(config => {
 
    // start the loding animation loading = Toast.loading({
        duration:10000,
        message: "Loading...",
        forbidClick:true,
    })
    //config.headers['Authorization'] = sessionStorage.getItem('token')
    return config
},error =>{
    console.log(error);
    return Promise.reject(error)
})
 
 
// Response interception service.interceptors.response.use(res =>{
    // Clear loading
    loading.clear()
    return Promise.resolve(res)
},error =>{
    loading.clear()
    console.log('err'+error);
    return Promise.reject(error)
})
 
// Throw export default service

This is the end of this article about the detailed explanation of JavaScript axios installation and packaging cases. For more relevant js axios installation and packaging content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!

You may also be interested in:

In-depth analysis of homology and cross-domain, jsonp (function encapsulation), CORS principle
Vue.js manages the encapsulation of background table components
Detailed explanation of JavaScript object-oriented practice: encapsulation and dragging objects
Native js encapsulation seamless carousel function
Native JS encapsulation vue Tab switching effect
js implements a simple method of encapsulating jQuery and a detailed explanation of chain operations
js implements some functions of the input component in Element and encapsulates it into a component (example code)
JavaScript implements prototype encapsulation carousel
Encapsulation method of JavaScript slow motion animation function
JavaScript canvas encapsulation dynamic clock
About Jackson's JSON tool class encapsulation JsonUtils usage
Example code for JavaScript encapsulation of a singly linked list
Common front-end JavaScript method encapsulation

<<: Solve the installation problem of mysql8.0.19 winx64 version

>>: Download and install VSCode on Linux and use programming to output the current time