axios封装，使用拦截器统一处理接口，超详细的教程（推荐）

//request.js
import axios from "axios";
import qs from "qs";
import app from "../main.js";

/****** 创建axios实例 ******/
const service = axios.create({
  baseURL: process.env.BASE_URL, // api的base_url
  timeout: 5000 // 请求超时时间
});

/****** request拦截器==>对请求参数做处理 ******/
service.interceptors.request.use(config => {
  app.$vux.loading.show({
    text: '数据加载中……'
  });
 
  config.method === 'post'
    "htmlcode">

/****** respone拦截器==>对响应做处理 ******/
service.interceptors.response.use(
  response => { //成功请求到数据
    app.$vux.loading.hide();
    //这里根据后端提供的数据进行对应的处理
    if (response.data.result === 'TRUE') {
      return response.data;
    } else {
      app.$vux.toast.show({ //常规错误处理
        type: 'warn',
        text: response.data.data.msg
      });
    }
  },
  error => { //响应错误处理
    console.log('error');
    console.log(error);
    console.log(JSON.stringify(error));
 
    let text = JSON.parse(JSON.stringify(error)).response.status === 404
      "color: #ff0000">2. axios接口的调用方式

axios封装好之后，调用就很简单了。我们把接口统一写在api.js文件里。（当然，如果你的业务非常复杂的话，建议把不同业务的api分开放到不同的文件里，这样方便以后维护）。
注意：post请求参数放在data里面，get请求参数放在params里。




//api.js
import service from './request'
 
export const getPersonInfo = data => {
  return service({
    url: '/person_pay/getpersoninfo',
    method: 'post',
    data
  })
};



然后在具体的组件中进行调用。


//index.vue
import {getPersonInfo} from '../axios/api.js'
export default {
  created: async function () {
    const params = {
      card_no: '111'
    };
    let res = await getPersonInfo(params);
    console.log(res);
  }
}



附上项目代码地址:  https://github.com/xie991283109/vueCli-test
以上所述是小编给大家介绍的axios封装使用拦截器处理接口详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！