axios 的简单封装

248 阅读1分钟

1.首先引入 axios

    import axios from 'axios'

2.创建一个实例

    const api = axios.create({
        baseURL: '', // 所有请求的公共地址部分
        timeout:  3000 // 请求超时时间 这里的意思是当请求时间超过5秒还未取得结果时 提示用户请求超时
    })

3.request拦截器

    // 请求相关处理 请求拦截 在请求拦截中可以补充请求相关的配置
    // interceptors axios的拦截器对象
    api.interceptors.request.use(config => {
         // config 请求的所有信息
        // console.log(config);
        return config // 将配置完成的config对象返回出去 如果不返回 请求讲不会进行
    }, err => {
        // 请求发生错误时的相关处理 抛出错误
       Promise.reject(err)
    })

4.response拦截器

    api.interceptors.response.use(res => {
        // 我们一般在这里处理,请求成功后的错误状态码 例如状态码是500,404,403
        // res 是所有相应的信息
        console.log(res)
       return Promise.resolve(res)
    }, err => {
        // 服务器响应发生错误时的处理
        Promise.reject(err)
    })

5.暴漏出去

    export default api

封装接口

    import api from '../index.js';

    下面是简写的形式
    // getXXX 自定义的接口名字
    export const getXXX = (params) => api.get(`/apigb/v1/component`, { params})

    export const postXXX = (params) => api.post(`/apigb/v1/component/update-info`, params)


    // 下面是详细的写法
    export const xxxx = (params) => api({
        url: '', // 请求地址
        method: 'post', // 请求方式
        // data: params, // (一般post请求,我们习惯使用 data属性来传参)
        params: params //(一般get请求,我们习惯使用params属性来传参)
        // 注意:data,和 params 两个属性传参使用,并不是固定的,也可以调换使用。
    })