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>