vue中axios的封装

1.在src文件中新建untils文件夹 新建axios.js文件

import axios from 'axios';

//设置axios
const service=axios.create({
    timeout:1000*60,
    baseURL:'/api',//对axios发送的请求路径进行集中设置
    //意思是在接口路径前加上/api
    //这里的 /api 是和vue.config.js中proxy 中设置的对应
})

//封装post请求
let post=function(url,data_={}){
    return new Promise((resolve,reject)=>{
        service.post(url,data_).then((res)=>{
            return resolve(res)
        }).catch((err)=>{
            return reject(err)
        })
    })
}

//封装get请求
let get=function(url,params){
    return new Promise((resolve,reject)=>{
        service.get(url,{params}).then((res)=>{
            return resolve(res)
        }).catch((err)=>{
            return reject(err)
        })
    })
}

//请求拦截
service.interceptors.request.use(config=>{
    //添加请求头
    config.headers={
        "Authorization":localStorage.token
    }
    return config
},err=>{
    return Promise.reject(err)
})

//添加响应拦截
service.interceptors.response.use(res=>{
    return res.data
},err=>{
    return err
})

export default{
    post,
    get
}

2.对请求方法进行二次封装

• 2.1 在src中新建api文件
• 2.2在api文件夹中新建文件 最好每个表格的接口写一个文件

//引入封装好的axios
import axios from '@/untils/axios';
//添加分类
function add_(data){
    return axios.get('/goodstype/add',data)
}export{
    add_ as add,
}

• 这种写法可以保护接口路径不公开

3.在vue文件中使用接口

import { add } from "@/api/goods";
async function(){
      let res=await add({
            //需要传的参数
      })
}