如何封装VUE的axios请求

---

目录

• [TOC]
  • 1.在scr目录下新建一个文件夹，我的取名为axios_send，在该文件夹下新建两个js文件
  • 2.导出使用

1.在scr目录下新建一个文件夹，我的取名为axios_send，在该文件夹下新建两个js文件

//文件名：http.js

import axios from 'axios'
axios.defaults.baseURL="http://127.0.0.1:8000"
axios.defaults.timeout=1000 *10

axios.defaults.headers.post['Content-Type']='application/json';
axios.defaults.headers.put['Content-Type']='application/json';
//封装get请求
export function axios_get(url,params){
    return new Promise(
        (resolve,reject)=>{
            axios.get(url,{params:params})
            .then(res=>{
                resolve(res.data)
            }).catch(err=>{
                reject(err.data)
            })
        }
    )
}

//封装post请求
export function axios_post(url,data){
    return new Promise(
        (resolve,reject)=>{
            console.log(data)
            axios.post(url,JSON.stringify(data))   //将json数据编译成字符串
            .then(res=>{
                resolve(res.data)
            }).catch(err=>{
                reject(err.data)
            })
        }
    )
}

//封装put请求
export function axios_put(url,data){
    return new Promise(
        (resolve,reject)=>{
            console.log(data)
            axios.put(url,JSON.stringify(data)) 
            .then(res=>{
                resolve(res.data)
            }).catch(err=>{
                reject(err.data)
            })
        }
    )
}


封装delete请求
export function axios_delete(url,data){
    return new Promise(
        (resolve,reject)=>{
            console.log(data)
            axios.delete(url,{params:data})
            .then(res=>{
                console.log("封装信息的的res",res)
                resolve(res.data)
            }).catch(err=>{
                reject(err.data)
            })
        }
    )
}

2.导出使用

文件名：api.js

import {axios_get,axios_post,axios_put,axios_delete} from '../axios_send/http'
export const api_get= p => axios_get('/app/index01/',p)