解锁前端开发的新境界 - 深入探索Axios，构建卓越的互联网应用
在当今数字化世界中，互联网应用的需求日益增长，而无论是大型企业还是初创公司，都需要一个强大而可靠的工具来处理与后端服务器之间的通信。这就是Axios的光辉时刻。作为前端开发者，你肯定想了解如何精确地发起HTTP请求、处理响应、拦截错误和优化性能。
幸运的是，本文将带你踏上一场关于Axios的深度探索之旅。我们将揭开Axios的神秘面纱，学习如何使用它的简洁且优雅的API，以及如何利用其强大的功能构建卓越的互联网应用。无论你是经验丰富的开发者还是初学者，这篇文章将为你提供宝贵的见解和技巧，助你在前端开发的道路上更进一步。
准备好迎接前端开发的新挑战了吗？让我们一同探索Axios的奥秘，为你的互联网应用注入更多的效率和高质量！
普通搭建
安装依赖
安装axios
cnpm install --save axios
安装querystring
cnpm install --save querystring
引入
局部引入
import axios from "axios"
全局引入【app.config.globalProperties】
main.js
import axios from "axios"
app.config.globalProperties.$axios = axios
组件使用
import { getCurrentInstance } from "vue"
const { proxy } = getCurrentInstance();
proxy.$axios.get()..
全局引入【利用Provide和Inject】
main.js
import axios from "axios"
app.provide("axios",axios)
组件使用
import { inject } from "vue"
const axios = i
使用
get请求
axios.get("xxx")
.then(res => {
console.log(res.data)
})
.catch(error => {
console.log(error)
})
get请求【带参】
axios.get("xxx", {
params: {
age: "1"
}
})
post请求
axios.post("xxx", qs.stringify({
id: "1",
}))封装搭建
安装依赖
安装axios
cnpm install --save axios
安装querystring
cnpm install --save querystring
封装axios
src / api / request.js
import axios from "axios"
import qs from "querystring"
/**
* 创建Axios对象
*/
const instance = axios.create({
//baseURL: "http://localhost:8030",
baseURL: "http://118.31.60.184:8030",
timeout: 5000,//配置5s超时
withCredentials: true//访问允许携带cookie
})
/**
* 响应失败处理器
*/
const errorHandle = (status, info) => {
switch (status) {
case 400:
console.log("语义错误");
break;
case 401:
console.log("服务器认证失败");
break;
case 403:
console.log("服务器请求拒绝执行");
break;
case 404:
console.log("请检查网路请求地址");
break;
case 500:
console.log("服务器发生意外");
break;
case 502:
console.log("服务器无响应");
break;
default:
console.log(info);
break;
}
}
/**
* 请求拦截器
*/
instance.interceptors.request.use(
config => {
if (config.method === 'post') {
// POST接收的网络请求参数需要进行格式转化
config.data = qs.stringify(config.data)
}
return config
},
error => Promise.reject(error)
)
/**
* 响应拦截器
*/
instance.interceptors.response.use(
response => response.status === 200 ? Promise.resolve(response) : Promise.reject(response),
error => {
const {response} = error;
if (response) {
errorHandle(response.status, response.info)
} else {
console.log("网络请求失败");
}
}
)
export default instance 封装接口
src / api / index.js
import axios from "./request"
const permission = {
search: "/sys/permission/search",
add: "/sys/permission/add",
update: "/sys/permission/update",
delete: "/sys/permission/delete",
findById: "/sys/permission/findById",
}
const api = {
permission_search(params) {
return axios.get(permission.search, {params})
},
permission_add(params) {
return axios.post(permission.add, params)
},
permission_update(params) {
return axios.post(permission.update, params)
},
permission_delete(params) {
return axios.delete(permission.delete, {params})
},
permission_findById(params) {
return axios.get(permission.findById, {params})
}
}
export default api 使用
引入
import axios from "../../api/index.js"
使用
axios.permission_search({
search: search,
page: page,
size: size
})
axios.permission_add({
permissionName: addFormInfo.permissionName,
permissionDesc: addFormInfo.permissionDesc,
})
axios.permission_findById({
pid: row.pid
})
axios.permission_update({
pid: editorFormInfo.pid,
permissionName: editorFormInfo.permissionName,
permissionDesc: editorFormInfo.permissionDesc,
})
axios.permission_delete({
pid: row.pid
})
