基于vue二次封装axios

1.安装axios

npm i axios

2.src目录新建http文件夹

2.1新建index.js

import axios from 'axios'

设置默认配置

const api=axios.create({
    baseURL:"http://127.0.0.1", // 设置请求基地址
    timeout:2000, // 设置超时时间
})

添加请求拦截器

api.interceptors.request.use(config=>{
    // 请求成功拦截
    console.log('请求成功')
    
}),err=>{
    // 请求失败拦截
    return Promise.reject(err)
}

添加响应拦截器

api.interceptors.response.use(comfig=>{
    // 响应成功拦截
    console.log('响应成功')
}).err=>{
    // 响应失败拦截
    return Promise.reject(err)
}

导出

export default api

2.2新建api.js

引入index.js

import axios from '@/http/index.js'

编写接口
例:
export const getinfo=(value)=>{ // 获取用户信息
    return axios({
        method:"post", // 设置请求类型
        url:"/user", // 设置请求路径
        data:{ // post请求携带的参数
            id:value.id,
            name:value.name
        }
    })
}

最后在组件引入接口,由于这里是按需导出，在组件要用按需导入语法

import {getinfo} from '@/http/api.js'