axios拦截器/数据交互实例

本文章是在rap2模拟接口下实现axios交互功能,axios拦截大部分代码逻辑来自https://blog.csdn.net/qq_38145702/article/details/81558816

1.src目录下新建axios文件夹,内有api.js和request.js

首先是request.js

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


/****** request拦截器==>对请求参数做处理 ******/
service.interceptors.request.use(config => {
    console.log('数据加载中……')//出现加载中动画
 
    config.method === 'post'
        ? config.data = qs.stringify({...config.data})
        : config.params = {...config.params};
    config.headers['Content-Type'] = 'application/x-www-form-urlencoded';
 
    return config;
}, error => {  //请求错误处理
    console.log('error',error)//错误提示
    Promise.reject(error)
});

/****** respone拦截器==>对响应做处理 ******/
service.interceptors.response.use(
    response => {  //成功请求到数据
        console.log('加载中动画结束,hide')//数据请求成功,自然加载中动画隐藏
        //这里根据后端提供的数据进行对应的处理
        if (response) {
            return response.data;
        } else {
            console.log(response)
        }
    },
    error => {  //响应错误处理
        console.log('error',error);
        let text = error
            ? '404'
            : '网络异常，请重试';
        console.log(text)
 
        return Promise.reject(error)
    }
);

export default service;

然后是api.js

//api用于写接口
//api.js
import service from './request'
export const getPersonInfo = data => {
    return service({
        url: 'http://rap2api.taobao.org/app/mock/19521/api/u/signup',
        method: 'post',
        data
    })
};

2.最后是在app.vue中使用