解锁前端开发的新境界 - 深入探索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
})