🌼未封装
在项目中往往一个页面存在着要联调好几个接口,此时用下面的写法就会显得代码很冗余
// 向给定ID的用户发起请求
axios.get('/user?ID=123456',{
params: { //发送请求的数据
ID: 123456
}
})
.then(function (response) {
// 处理成功情况
console.log(response);
})
.catch(function (error) {
// 处理错误情况
console.log(error);
})
.finally(function () {
// 总是会执行
});
// 支持async/await用法
async function getUser() {
try {
const response = await axios.get('/user?ID=123456');
console.log(response);
} catch (error) {
console.error(error);
}
}
🌼封装一下
errorCode.js
export default {
'401': '认证失败,无法访问系统资源',
'403': '当前操作没有权限',
'404': '访问资源不存在',
'default': '系统未知错误,请反馈给管理员'
}
request.js
一般会在utils文件夹下创建request.js文件。封装的好处:统一处理请求和响应、简化API调用、提高代码的可维护性。
//引入axios
import axios from 'axios'
//引入错误信息合集
import errorCode from '@/utils/errorCode'
axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'
// 创建axios实例
const service = axios.create({
//base接口,表示请求URL的公共部分
baseURL:'http://127.0.0.1:8000/api/',
// 超时
timeout: 30000
//还可以进行一些其他的配置
})
// 请求拦截器
service.interceptors.request.use(config => {
//配置请求头,以下是一个示例,设置语言为简体中文
config.headers.lang = 'zh-CN'
//对请求数据进行处理
return config
}, error => {
return Promise.reject(error)
//请求拦截错误处理
})
// 响应拦截器
service.interceptors.response.use(async(res) => {
//根据自己的需求进行代码的编写,以下是一些示例
// 未设置状态码则默认成功状态
const code = res.data.code || 200;
// 获取错误信息
const message = errorCode[code] || res.data.msg || errorCode['default']
//通过响应码的不同进行不同的处理
if (code === 401) {
//响应码为401时的处理
} else if (code === 404) {
//响应码为404时的处理
} else {
//响应码为其他类型时的处理
}
return res.data
}, async error => {
//响应发生错误时的处理
console.log('error')
return false
}
)
🌼调用接口
1.接口封装调用
import request from '@/utils/request';
// 获取用户信息
export function getUserInfo(data) {
return request({
url: `/user/getUserInfo`, //请求的接口地址
method: 'post', //请求的方式
data //请求的数据
})
}
import {getUserInfo} from '@/api/login';
//写法1
const res = await getUserInfo({userId:123456})
//写法2
function getInfo() {
getUserInfo({userId:123456}).then((res) => {
console.log(res)
})
}
2.接口普通调用
import request from "@/utils/request";
function getUserInfo(){
request({
url: `/user/getUserInfo`,
method: "post",
data: {
userId:123456
},
}).then((res) => {
console.log(res)
}).catch(()=>{
})
}