这是我之前写的一个封装办法https://blog.csdn.net/huanhuan03/article/details/103659986
现在重新封装成更方便简单的,学如逆水行舟啊,多看看各大网站的教程,其中用到了async/await语法,如果不明白,看看这篇博客
项目结构什么的就不说了,依然在src目录下新建文件夹service,在service文件夹下新建两个js文件,一个contactApi.js存放项目中所有请求接口的url和请求方式:
const CONTACT_API = {
// 获取联系人列表
getContactList:{
method:'get',
url:'/contactList'
},
// 新建联系人 form-data
newContactForm:{
method:'post',
url:'/contact/new/form'
},
// 新建联系人 application/json
newContactJson:{
method:'post',
url:'/contact/new/json'
},
// 编辑联系人
editContact:{
method:'put',
url:'/contact/edit'
},
// 删除联系人
delContact:{
method:'delete',
url:'/contact'
}
}
export default CONTACT_API
另一个http.js存放封装逻辑,和请求拦截器、响应拦截器:
import axios from 'axios'
import service from './contactApi'
import {Toast} from 'vant' // 有赞的Vant UI库
// service 循环遍历输出不同的请求方法
let instance = axios.create({
baseURL:'http://localhost:9000/api',
timeout:1000
})
const Http = {}; // 包裹请求方法的容器
// 请求格式/参数的统一
for(let key in service){
let api = service[key]; // url method
// async 作用:避免进入回调地狱
Http[key] = async function(
params, // 请求参数 get:url,put,post,patch(data),delete:url
isFormData=false,// 标识是否是form-data请求
config={} // 配置参数 详细配置查看https://blog.csdn.net/qq_41866776/article/details/98478632
){
let newParams = {}
// content-type是否是form-data的判断
if(params && isFormData){
newParams = new FormData()
for(let i in params){
newParams.append(i,params[i])
}
}else{
newParams = params
}
// 不同请求的判断 // 这里依据项目要求自行更改传参格式
let response = {}; // 请求的返回值
if(api.method === 'put'|| api.method === 'post'||api.method === 'patch'){
try{
response = await instance[api.method](api.url,newParams,config)
}catch(err){
response = err
}
}else if(api.method === 'delete'|| api.method === 'get'){
config.params = newParams // 即将与请求一起发送的 URL 参数// 必须是一个无格式对象(plain object)或 URLSearchParams 对象
try{
response = await instance[api.method](api.url,config)
}catch(err){
response = err
}
}
return response; // 返回响应值
}
}
// 拦截器的添加
// 请求拦截器
instance.interceptors.request.use(config=>{
// 发起请求前做些什么
Toast.loading({
mask:false,
duration:0,// 一直存在
forbidClick:true, // 禁止点击
message:'加载中...'
})
return config
},()=>{
// 请求错误
Toast.clear()
Toast('请求错误,请求稍后重试')
})
// 响应拦截器
instance.interceptors.response.use(res=>{
// 请求成功
Toast.clear()
return res.data
},()=>{
Toast.clear()
Toast('请求错误,请求稍后重试')
})
export default Http
将导出的Http在main.js里面挂载在Vue原型上:Vue.prototype.$Http = Http
,在页面中的应用:
methods: {
// 获取联系人列表 // 不传参数
async getList(){
let res = await this.$Http.getContactList()
this.list = res.data
},
// 删除联系人 // 传入参数id
async onDelete(info){
let res = await this.$Http.delContact(
{
id:info.id
}
)
if(res.code === 200){
Toast('删除成功')
this.getList()
}
}
}
是不是省了很多行代码,而且结构清晰
需要注意的是:在http.js里面根据请求方式判断传参格式的逻辑,需要根据项目要求或者说后端人员给的接口文档来修改。