一、前言

这里是对接口请求进行简单的二次封装，要更全面的处理接口数据，可以使用：vue 引入store_Vue 全局数据管理

二、操作

1、安装 axios

npm install axios

2、文件目录结构

在这里插入图片描述

3、request.js 接口请求统一处理

import axios from "axios";

const request = axios.create({
    baseURL: 'http://***.api.com',
	timeout: 30 * 1000, //请求超时时间：30秒
	withCredentials: false // 表示跨域请求时是否需要使用凭证
});

// 请求拦截器
request.interceptors.request.use(
	config => { //配置信息处理
		return config;
	},
	error => { //错误处理
		console.log(error);
		return Promise.reject(error);
	}
);

// 响应拦截器
request.interceptors.response.use((res) => { // 请求成功的回调函数
	// console.log(res);
	// return  res.data;
	return  res;
},(err) => { // 请求失败的回调函数
    return Promise.reject('fail');
});

export default request;

4、index.js 接口请求功能封装

import request from './request.js'

//导航栏
export function bar(params) {
    return request({
        url: '/bar',
        method: 'GET',
        params
    })
}

//首页
export function home(params) {
    return request({
        url: '/',
        method: 'GET',
        params
    })
}

//页脚
export function footer(params) {
    return request({
        url: '/footer',
        method: 'GET',
        params
    })
}

5、footer/index.vue 使用封装好了的方法

<script>
import {footer} from '../../api'
export default {
    name: 'app',
    data() {
        return {
            list: []
        }
    },
    created() {
        this.getFooterData()
    },
    methods: {
        async getFooterData() { //此处可使用async await语法
			//法一
			let res = await footer();
			this.list = res.data.data.lists
			// console.log(res)
			
			//法二：推荐
			/*
			footer().then(res => {
				let that = this
				that.list = res.data.data.lists
				// console.log(this.list);
			});
			*/
        }
    }
}
</script>