vue cli3封装axios

1.创建vue3项目，过程省略
2.创建axios文件api.js,

3.在api.js封装get,post请求。

import axios from 'axios'
import { Message, MessageBox, Loading } from 'element-ui';

let loading ;

function startLoading() { //使用Element loading-start 方法
    loading = Loading.service({
        lock: true,
        text: '加载中……',
        background: 'rgba(0, 0, 0, 0.7)'
    })
}
function endLoading() { //使用Element loading-close 方法
    loading.close()
}
const service = axios.create({
    baseURL: process.env.BASE_API
    timeout: 500000 // 请求超时时间
})

// request拦截器
service.interceptors.request.use(config => {
    config.isForm ?
        config.headers["content-type"] = "application/x-www-form-urlencoded" :
        config.headers["content-type"] = "application/json";
         startLoading();
    return config
}, error => {
    Promise.reject(error)
})

// respone拦截器
service.interceptors.response.use(
    response => {
      endLoading();
        return response.data
    },
    error => {
     Message({
            message:"网络错误，请重试!",
            type:"error"
        });
      endLoading();
        return Promise.reject(error)
    }
)

/**
 * post方法，对应post请求
 * @param {String} url [请求的url地址]
 * @param {Object} params [请求时携带的参数]
 * @returns Promise
 */
export function post(url, params = {}, isForm = false) {
    return new Promise((resolve, reject) => {
        service({
            url,
            method: 'post',
            data: params,
            isForm
        }).then(response => {
            resolve(response)
        }).catch(error => {
            reject(error)
        })
    })
}

/**
 * get方法，对应get请求
 * @param {String} url [请求的url地址]
 * @param {Object} params [请求时携带的参数]
 * @returns Promise
 */
export function get(url, params = {}, isForm = false) {
    return new Promise((resolve, reject) => {
        service({
            url,
            method: 'get',
            params: params,
            isForm
        }).then(response => {
            resolve(response)
        }).catch(error => {
            reject(error)
        })
    })
}

4.访问，引入api.js，在方法里面调用get请求。

5.完成，效果图如下