简单易懂!!!如何封装一个HTTP请求

前期配置： 安装 npm i axios -S

第一步： 封装axios实例 —— request.js **** request.js ****
// 导入axios import axios from 'axios' import jsonBig from 'json-bigint'
// 使用element-ui Message做消息提醒 import { Message} from 'element-ui';
//1. 创建新的axios实例， const service = axios.create({ // 公共接口，基地址 baseURL: process.env.BASE_API,
// 超时时间 单位是ms，这里设置了3s的超时时间
timeout: 3 * 1000，

transformResponse: [function (data) {
try {
	return jsonBig.parse(data)    
} else {
    return data
}
 }]

// 2.请求拦截器 service.interceptors.request.use(config => { //发请求前做的一些处理，数据转化，配置请求头，设置token,设置loading等，根据需求去添加 config.data = JSON.stringify(config.data); //数据转化,也可以使用qs转换 config.headers = { 'Content-Type':'application/json' //配置请求头 }

return config }, error => { Promise.reject(error) })

const enumStatus = { 400: '错误请求', 401: '未授权，请重新登录' }

// 3.响应拦截器 service.interceptors.response.use(response => { //接收到响应数据并成功后的一些共有的处理，关闭loading等

return response }, error => { /***** 接收到异常响应的处理开始 *****/ if (error && error.response) { // 1.公共错误处理 // 2.根据响应码具体处理 error.message = enumStatus[error.response.status] } else { // 超时处理 if (JSON.stringify(error).includes('timeout')) { Message.error('服务器响应超时，请刷新当前页') } error.message = '连接服务器失败' }

Message.error(error.message) /***** 处理结束 *****/ //如果不需要错误处理，以上的处理过程都可省略 return Promise.resolve(error.response) }) //4.导入文件 export default service

第二步：封装API，用于发送请求

在项目 SRC 下 创建 api 文件夹 ，并创建 接口文件 import request from '@/utils/request'

//按需导出请求，如登录请求

export function login(data) { return request({ url: '/sys/login', method: 'post', data }) }

第三步 ：在Vue 页面调用 import { getListAPI } from '@/api/api'

getList() { getListAPI().then(res => console.log(res)) .catch(err => console.log(err)) }