axios请求和API的封装与使用

新建一个request.js文件

import axios from "axios";
import qs from 'qs'


// 创建axios实例
const service = axios.create({
  baseURL: "http://192.168.5.34:8081", // api 的 base_url
  timeout: 5000, // 请求超时时间
});

// request请求拦截器
service.interceptors.request.use(
  config => {
    if(config.method!='get'){
        config.data=qs.stringify(config.data);
    }
    config.headers['Content-Type'] = 'application/x-www-form-urlencoded';
    return config;
  },
  error => {
    const res = error.response.data;
    message.error('请求结果：' + res.message);
    return Promise.reject(error);
  }
);

// response响应拦截器
service.interceptors.response.use(function (response) {
  // 全局捕获 如果code等于255 强行跳转到登录页
	if (response.data.code == 255){
    router.replace({ 
      path: '/login',
      query: { redirect: router.currentRoute.fullPath }
    })
	}
	return response
}, function (error) {
  return Promise.reject(error)
})


export default service;

新建一个api.js文件，存放接口
在里面引入request.js文件

import request from '../request/request'

// 获取账号列表
export function queryAllPerson(data) {
    return request({
      url: "web/person/queryAllPerson",
      method: "post",
      data
    });
}

// 删除账号
export function deletePerson(data) {
    return request({
      url: "web/person/deletePerson",
      method: "post",
      data
    });
}

// 添加账号
export function createPerson(data) {
    return request({
      url: "web/person/createPerson",
      method: "post",
      data
    });
}

在组件中的script标签里引入函数名

import { queryAllPerson, deletePerson, createPerson } from '../../request/accountApi'

methods: {
        // 获取账号列表
        getQueryAllPerson() {
            queryAllPerson(this.queryInfo).then(res=> {
                if (res.data.code !== 1) return
                this.membersList = res.data.resultData
            })
        },
     }