vue 封装axios的api

vue 封装axios的api

	**axios的封装和api接口的统一管理，其实主要目的就是在帮助我们简化代码和利于后期的更新维护。**

首先我们需要安装axios

npm i axios

然后我们需要定义一个js文件，用来封装（直接代码）

第一步 封装axios开放环境、拦截器以及请求方式

//引入axios
import axios from 'axios'

//生产环境
if(process.env.NODE_ENV=='development'){
    axios.defaults.baseURL='统一路径'

    // console.log(process);
}

//开发环境
if(process.env.NODE_ENV=='production'){
    axios.defaults.baseURL='统一路径'
}

//设置请求时间
axios.defaults.timeout==4000;

  

//拦截器
//请求拦截
axios.interceptors.request.use(
    config=>{
        //可以出来每次发送请求之前的逻辑  例：token验证
        config.headers={DeviceType:'H5'}

        return config
    }
)

//响应拦截
axios.interceptors.response.use(response => {
  return  response //拦截处理响应结果，直接返回需要的数据
}, err => {
  console.log(err)
})


//使用promise返回axios请求结果

//GET请求
export function get(url,params){
   return new Promise((resolve,reject)=>{
    axios.get(
        url,
        {
            params:params
        }
    ).then(res=>{
        resolve(res)
    }).catch(err=>{
        reject(err)
    })
   })
}

//POST
export function post(url,params){
    return new Promise((resolve,reject)=>{
        axios.post(url,params).then(res=>{
            resolve (res.data)
        }).catch(err=>{
            reject(err.data)
        })
    })
}

第二步 单独管理请求路径

import {get,post} from '../http/http'

//get请求
export function getBanner('参数'){
    return get('请求路径',请求参数)
}

//post请求
export function getList('参数'){
    return post('请求路径','请求参数')
}
}在这里插入代码片

然后我们只需带组件中按需引入即可使用

<script>
//利用解构赋值快速抓取
		import { getBanner, getList} from "文件路径/api.js";
	export default {

	async mounted:{
	//挂载时请求数据，进行页面渲染
		var banner = await getBanner()
		console.log(banner)

		var list = await getList('请求参数')
		console.log(list)
	}
</script>