利用 axios 搭建基础的接口请求配置文件

最适合新手小白，从 0 开始搭建接口请求配置文件

🎊安装 axios 依赖

在项目位置的终端输入以下命令：

npm install axios

安装成功后，在 项目的 /项目/src/servers 文件夹下创建一个基础文件 index.js 文件作为请求配置文件，若没有 /servers 文件夹也可以根据实际情况去创建或直接修改 index.js 配置文件。

目录文件：

- /项目
    - /src
        - /servers
            - index.js

🙌代码示例

import axios from 'axios';

const baseUrl = 'http://xxx:18089'; //todo 替换真实的接口请求地址

// 创建名为 instance 的 axios 实例
const instance = axios.create({
    baseURL: baseUrl,
    timeout: 1000 * 60 * 5, // 请求超时时长为 5 分钟
    headers: {
        'Content-Type': 'application/json;charset=UTF-8',
    },
});

// 请求拦截器
instance.interceptors.request.use(
    config => {
        return config;
    },
    error => {
        console.log(error);
        Promise.reject(error);
    }
);

// 响应拦截器
instance.interceptors.response.use(
    response => {
        return response.data;
    },
    error => {
        if (error.response) {
            // 根据不同错误响应类型提示相关语句
            switch (error.status) {
                case 500: // 服务器错误
                    alert('服务器内部错误');
                    break;
                case 401: // 未登录
                    alert('请先登录');
                    break;
                case 403: // 没有权限
                    alert('没有权限访问该资源');
                    break;
                case 404: // 请求地址不存在
                    alert('请求地址不存在');
                    break;
                default:
                    alert('未知错误');
                    break;
            }
        }
        Promise.reject(error);
    }
);

export default instance;

🎏使用

引入刚才配置好的请求配置文件，就可以直接使用了。引入地址就是相对于当前文件，请求配置文件的路径，例如这里的路径是：'../servers/index.js'

import instance from '../servers/index.js'; // 引入请求配置文件

// 接口请求方法
async function requestMethod(){
    await instance.get('/test');
}

🐾总结

创建 axios 实例，根据项目情况配置请求拦截和响应拦截，基于以上的铺垫，可以在项目任何业务中去使用了。

🎉参考

进行更多的配置项

• 起步 | Axios中文文档 | Axios中文网