axios 的二次封装

vue 中创建 啊 api 中 axios.js 文件

// 对axios 的 二次封装
import axios from "axios"
// 引入进度条
import nprogress from "nprogress"
// 引入进度条的样式
import "nprogress/nprogress.css"
// 在当前模块中引入 store
import {vm} from '@/main'
// 1.利用 axios 对象的方法create，去创建一个axios 实例
// 2.request就是axios，只不过就是配置一下
const requests = axios.create({
    // 配置对象
    // 基础路径，发请求的时候，路劲当中会出现api
    baseURL:"/api",
    // 代表请求超时的时间5s
    timeout:5000,
})
// 请求拦截器
requests.interceptors.request.use((config)=>{
    // config: 配置对象。对象里面有一个属性很重要，header请求头
    // 进度条开始动
    nprogress.start()
    if(vm.$store.state.detail.uuid_token){
        // 请求头添加一个字段，和后台说好
        config.headers.userTempId = vm.$store.state.detail.uuid_token

    }
    // 需要携带token带给服务器
    if(vm.$store.state.user.token){
        config.headers.token = vm.$store.state.user.token
    }
    return config
})
// 响应拦截器
requests.interceptors.response.use(
    res => {
        // 成功的回调
        // 进度条结束
        nprogress.done()
        return res.data
    },
    error => {
        // 失败的回调
        return Promise.reject(new Error('faile'))
    }
)

// 对外暴露
export default requests

创建 config 文件 保存 接口 地址

export default {
    title:'admin',
    baseUrl:{
        // 开发环境
        dev:'api/',
        // 生产
        pro:''
    }
}

api 文件下面创建 data.js 请求接口数据

import axios from './axios'
export const getNameData = () => {
    return axios.request({
        url:'home/nameData',
        method:'get',
    })
}
export const buyData = () => {
    return axios.request({
        url:'home/buyData',
        method:'get'
    })
}

下载mockjs    npm i  mockjs 配置接口   api 文件夹下面新建mock.js 文件

import Mock from 'mockjs'
const code = 200
const domain = '/api/home'
const nameData = res => {
    let names = [
        {
            name:'张三',
            age:'19',
            sex:'男'
        },
        {
            name:'李四',
            age:'10',
            sex:'男'
        },
    ]
    return {
        names,
        code
    }
}

Mock.mock(`${domain}/nameData`, 'get', nameData)

mian.js 页面中引入mock文件

// 引入 Mock
import Mock from './api/mock'
process.env.MOCK && Mock

组件中使用

导出data文件请求接口的方法
import {getNameData} from '../api/data'
mounted() {
    getNameData().then((res)=>{
      console.log(res);
    })
    // this.$axios.get("/api/home/nameData").then((res)=>{
    //   console.log(res);
    // })
  },

页面显示