1、axios初次封装(基于Vue保姆级)
首先下载axios依赖
npm i axios
在项目中配置依赖文件request.js
//在项目中引入axios依赖
import axios from "axios"
// 创建axios对象,并对axios进行全局配置
let instance = axios.create({
baseURL:'https://apif.java.crmeb.net/api/front/', //根路径,根据开发文档自行更改
timeout:2000,//网络超时时间
})
// 添加请求拦截
instance.interceptors.request.use(config=>{
// 请求成功拦截 例如:权限认证 设置token到请求头
const token = localStorage.getItem('token')
if(token){
config.headers['authori-zation'] = token
}
return config
},err=>{
// 请求错误的拦截
return Promise.reject(err)
})
// 添加响应拦截
instance.interceptors.response.use(res=>{
// 响应成功的拦截状态码2XX
//可以做一些数据过滤,如return res.data
return res
},err=>{
// 响应失败的拦截 状态码4XX 一般做一些错误的封装
if(err && err.response){
switch(err.response.status){
case 400:
err.message="请求错误"
break;
case 401:
err.message="未授权的访问"
break;
}
}
return Promise.reject(err)
})
// 封装get请求 基于promise
let requestget = (url,data)=>{
return new Promise((resolve,reject)=>{
// get请求传参的另一种方式
instance.get(url,{params:data}).then(res=>{
resolve(res)
}).catch(err=>{
reject(err)
})
})
}
//封装post请求 基于promise封装
let requestpost = (url,data=null)=>{
return new Promise((resolve,reject)=>{
instance.post(url,data).then(res=>{
resolve(res)
}).catch(err=>{
reject(err)
})
})
}
//将两种方法导出来便于使用或者二次封装
export {
requestget,
requestpost
}
2、axios二次封装
基于项目接口调用封装好的post、get请求方法进行再封装
//把方法导入进来使用
import { requestget,requestpost } from "@/utils/request";
// 1、获取首页轮播图拿数据
let getbanners = ()=>requestget('index')
// 2、获取首页商品排行榜数据
let getSortgoods = ()=>requestget('product/leaderboard')
// 四个商品请求
let getone = (type)=>requestget(`index/product/${type}?page=1&limit=6`)
//导出方法直接使用
export {
getbanners,
getSortgoods,
getone,
}
3、封装接口使用示例
在一个vue组件内直接导入使用即可
//导入方法
import { getbanners } from '../api/home.js'
//在正确的钩子函数内
created(){
getbanners().then(res => {
// console.log(res.data);
this.meslists = res.data.data.explosiveMoney
// console.log(this.meslists);
})
}