配置 axios 网络请求

时间:2021-10-03
本文章向大家介绍配置 axios 网络请求,主要包括配置 axios 网络请求使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

在项目中配置 axios

例如 Vue 、 React 都可这样使用

1. 安装依赖

npm i -S axios

2. 在src目录下

  1. 创建utils文件夹,创建request.js

    // 封装axios
    import axios from "axios"
    import qs from "querystring"
    
    /**
     *  处理失败的方法
     *  status:状态码
     *  info:信息
     */
    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 503:
                console.log("服务器在忙或在停机维护");
                break;
            default:
                console.log(info);
                break;
        }
    }
    /**
     *  创建axios实例对象
     */
    const instance = axios.create({
        // 公共配置
        timeout:5000
    })
    /**
     *  处理拦截器
     */
    
    /**
     *  请求拦截
     */
    instance.interceptors.request.use(
        config =>{
            if(config.method === 'post'){
                config.data = qs.stringify(config.data);
            }
            // // 配置请求头token信息
            // if(store.state.loginModule.user.token){
            //     config.headers.authorization = store.state.loginModule.user.token
            // }
            return config
        },
        error => Promise.reject(error)
    )
    
    instance.interceptors.response.use(
        // 完成了
        response => response.status === 200 ? Promise.resolve(response) : Promise.reject(response) ,
        error =>{
            const { response } = error;
            errorHandle(response.status,response.info);
        }
    )
    
    export default instance
    
  2. 创建api文件夹,创建index.js

    //引入utils下的request.js
    import axios from "../utils/request.js"
    
    /**
     *  路径地址
     */
    const base = {
        
    }
    
    /**
     *  请求方法
     */
    const api = {
        
    }
    
    export default api;
    

人生人山人海人来人往,自己自尊自爱自由自在。

本文来自博客园,作者:青柠i,转载请注明原文链接:https://www.cnblogs.com/fuct/p/15364218.html

原文地址:https://www.cnblogs.com/fuct/p/15364218.html