axios官网

npm install axios

封装

axios实例

axios.create([confg])

拦截器

步骤：先下载axios

npm install axios

在src目录下新建一个untils,在untils目录下新建一个request.js

import axios from 'axios'


//创建实例
const http = axios.create({
	//通用请求的地址（地址前缀）
	baseURL:'/api',
	timeout:10000,//超市时间10秒钟=10000毫秒；
})

// 添加请求拦截器
http.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });

// 添加响应拦截器
http.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    return response;
  }, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
  });

export default http

api

在src目录下新建api目录写一个index.js

index.js内容

import http from '../untils/request.js'

//请求首页数据
export const getData=()=>{
	//返回一个promise对象
	return http.get('/home/getData')
}

在home页面使用

先引入import {getData} from '../api/index.js'

在使用：在create或者mounted使用都行

getData().then((data)=>{
        console.log(data)
})

因为目前没有数据所以是404状态：

所以接下来我们来mock一个数据：

Mock

前端用来模拟后端的一个接口的工具（不依赖后端的情况下自己与自己的数据交互）

mock官网

mock官方文档

下载mock：npm install mockjs

在package.json查看下载好mockjs

在api下面建一个mock.js 引入mock

import Mock from 'mockjs'

在main.js里面引入mock

import './api/mock'

mock使用方法：Mock.mock(url,type,function(option))

import Mock from 'mockjs'

//定义mock请求拦截
Mock.mock('/api/home/getData',function(){
	//拦截到请求后的处理逻辑
	console.log('拦截到了')
	return []
})

Mock.mock('/api/home/getData', homeApi.getStatisticalData)

在src的api目录创建一个mockServeData目录，里面建个home.js