欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

axios请求和API的封装与使用

程序员文章站 2022-07-02 12:16:57
...

新建一个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
            })
        },
     }