简易的封装axios接口

创建一个utils文件夹，创建一个js文件

 这个js文件就是用于设置存放一些拦截器等内容如下：

import axios from 'axios';

const service = axios.create({
    // process.env.NODE_ENV === 'development' 来判断是否开发环境
    // easy-mock服务挂了，暂时不使用了
    // baseURL: 'https://www.easy-mock.com/mock/592501a391470c0ac1fab128',
    timeout: 5000
});

service.interceptors.request.use(
    config => {
        return config;
    },
    error => {
        console.log(error);
        return Promise.reject();
    }
);

service.interceptors.response.use(
    response => {
        if (response.status === 200) {
            return response.data;
        } else {
            Promise.reject();
        }
    },
    error => {
        console.log(error);
        return Promise.reject();
    }
);

export default service;

在api文件中引入上方js文件。

import request from '../utils/request';
// import {getCurrentInstance} from "vue";
import qs from 'qs';
export const fetchData = (query, url) => {//query是你要请求接口的参数，url是你的接口地址
    return request({
        // header:'',
        url: url,
        method: 'post',
        data: qs.stringify(query)
    });
};

在模板中使用

 

fetchData(服务器请求的参数, "服务器的地址").then((res) => {
		//请求的参数是一个对象。
})