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

import axios from 'axios';

//設(shè)置axios
const service=axios.create({
    timeout:1000*60,
    baseURL:'/api',//對(duì)axios發(fā)送的請(qǐng)求路徑進(jìn)行集中設(shè)置
    //意思是在接口路徑前加上/api
    //這里的 /api 是和vue.config.js中proxy 中設(shè)置的對(duì)應(yīng)
})

//封裝post請(qǐng)求
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請(qǐng)求
let get=function(url,params){
    return new Promise((resolve,reject)=>{
        service.get(url,{params}).then((res)=>{
            return resolve(res)
        }).catch((err)=>{
            return reject(err)
        })
    })
}

//請(qǐng)求攔截
service.interceptors.request.use(config=>{
    //添加請(qǐng)求頭
    config.headers={
        "Authorization":localStorage.token
    }
    return config
},err=>{
    return Promise.reject(err)
})

//添加響應(yīng)攔截
service.interceptors.response.use(res=>{
    return res.data
},err=>{
    return err
})

export default{
    post,
    get
}

2.對(duì)請(qǐng)求方法進(jìn)行二次封裝

• 2.1 在src中新建api文件
• 2.2在api文件夾中新建文件 最好每個(gè)表格的接口寫(xiě)一個(gè)文件

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

• 這種寫(xiě)法可以保護(hù)接口路徑不公開(kāi)

3.在vue文件中使用接口

import { add } from "@/api/goods";
async function(){
      let res=await add({
            //需要傳的參數(shù)
      })
}