Vue axios封装

在脚手架src文件夹中创建一个uitls文件夹在文件夹中创建2个js文件

1.api.js 写入请求数据接口

import server from '@/utils/server'
// 请求首页轮播图片的接口
const getBanners = async () => {
    let data = await server.get('/xxxxxx/banner/xxxx')
    return data
}

// 请求砍价列表数据的接口
const getKjList = async () => {
    let data = await server.get('/xxxxx/xxxx/xxx/kanjia/xxxx')
    return data
}

export {
    getBanners,
    getKjList
}

2.server 写入 请求公共地址 超时时间，请求拦截、响应拦截 （样式）

import axios from 'axios'
import Vue from 'vue'
import $loading from '@/components'

Vue.use($loading)
// axios创建一个请求的方法
const server = axios.create({
    baseURL: 'https://api.it120.cc', // 请求公共地址
    timeout: 5000 // 设置请求超时的时间
})


// 请求拦截
// interceptors 请求拦截器 request 请求 所以这里表示请求拦截
server.interceptors.request.use(config => {
    // console.log(config);
    config.headers.token = '123344444'
    Vue.$loading.show('拼命加载中...')
    return config
}, err => {
    Promise.reject(err)
})


// 相应拦截
// res 后台返回的数据
server.interceptors.response.use(res => {
    // console.log(res);
    switch(res.data.code) {
        case 404:
        console.log('请求资源找不到');
        break;
        case 500:
        console.log('服务器错误');
        break;
    }
    Vue.$loading.hide()
    return res.data
}, err => {
    Promise.reject(err)
})

//  server就是一个我们自己添加了自定义内容的ajax请求
export default server