axios封装以及请求响应拦截,持续更新V1.1

在src的目录下新建一个文件夹 request , 里面存放一个接口文件 api.js 以及封装文件 request.js

request.js

// 封装request / axios
import axios from 'axios';
import fs from 'fs';
// 创建一个单例
const instance = axios.create({
  baseURL: 'http://127.0.0.1:3000',
  timeout: 5000
})
//请求拦截
instance.interceptors.request.use(
  (config) => {
    if(config.method == 'post'){
        config.data = qs.stringify(config.data)
    }
    return config
  },
  (err) => {
    return Promise.reject(err)
  }
) 
// 响应拦截
//这边采用直接返回data 后续组建中就可以不写.data
instance.interceptors.response.use(
  (config) => {
    return config.data
  },
  (err) => {
    return Promise.reject(err)
  }
)
export default instance;

api.js

import request from './request.js'
// 按需导出api
// 获取三级列表数据
export const getListsApi = (id) => request.get('/brand?id=' + id)

在组件中调用

// 按需导入接口
import { getListsApi } from '../request/api'
export default {
data() {
return {
//控制左侧分页栏
active: 0,
// 一级分类 物品种类
items: [],
//二级分类
cate2: [],
//三级分类 品牌分类
brand: [[], [], []],
};
},
methods: {
// 获取三级列表
getLists() {
this.brand = [[], [], []];
// 调用api
getListsApi(this.active + 1).then((res) => {
let result = res.result;
console.log(res);
result.forEach((item, i) => {
if (item.brand_cat2_id == 1) {
this.brand[0].push(item);
} else if (item.brand_cat2_id == 2) {
this.brand[1].push(item);
} else {
this.brand[2].push(item);
}
});
// console.log(this.brand);
});
},
}
};