🌼未封装

在项目中往往一个页面存在着要联调好几个接口，此时用下面的写法就会显得代码很冗余

// 向给定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(()=>{})
}