“超越传统的HTTP请求：深度解析Axios，打造前端开发的终极利器“

  

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