1、Axios网络请求完整封装及使用（重点）

最新推荐文章于 2025-09-30 09:57:30 发布

原创最新推荐文章于 2025-09-30 09:57:30 发布 · 1.1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #开发语言 #vue

文章介绍了在Vue项目中如何封装axios以统一处理网络请求，包括错误处理、请求和响应拦截器的使用，以及如何创建API接口文件并在组件中调用这些封装后的请求。

在日常应用过程中，一个项目中的网络请求会很多，此时一般采用的方案是将网络请求封装起来封装：将实现相同功能的放在一起，后期找起来方便

1axios配置网站

axios封装存放位置

axios的封装

// 新建js文件，作为工具，可以放在自建的utils文件夹下
// this.$axios({})
import axios from "axios"
import qs from "querystring"
 
//对响应状态码的统一处理
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;
    }
}
 
const instance = axios.create({
    //网络请求时间：5秒  超过5秒则请求失败
    timeout: 5000
    //网路请求公共配置
})
 
//添加一个请求拦截器
axios.interceptors.request.use(config => {
    //在请求之前做一些事
    //发送post请求数据的统一处理
    if (config.methods === "post") {
        config.data = qs.stringify(config.data);
    }
    return config;
}, err => {
    //请求错误的时候做一些事
    return Promise.reject(error);
});
 
//添加一个响应拦截器
axios.interceptors.response.use(response => {
    //对返回的数据做一些处理
    return response.status === 200 ? Promise.resolve(response) : Promise.reject(response);
}, error => {
    //对返回的错误做一些处理
    const { response } = error;
    errorHandle(response.status,response.info);
    // return Promise.reject(error);
 
});
export default instance;

axios封装的使用方法

1.配置api接口文件

api文件存放位置

(1)index.js

import axios from '../utils/request';
import path from './path'

const api={
    //诚品地址
    getChengPin(){
        return axios.get(path.baseUrl + path.chengPin)
    }
}

export default api;

(2)path.js

const base={
    baseUrl:"http://iwenwiki.com",
    chengPin:"/api/blueberrypai/getChengpinDetails.php"
}

export default base;//导出定义的base

2.在组件中使用axios封装的内容

import api from "../api/index"//引入自定义的api文件
mounted(){//使用方法
  api.getChengPin().then(res=>{
    console.log(res.data);
  })
 }

测试接口文档合集： http://iwenwiki.com/1

baseUrl:"http://iwenwiki.com/"
chengPing:"/api/blueberrypai/getChengpinDetails.php"

总结：封装axios，创建api，在组件中使用api