账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    关于axios封装模块的一点疑问?
    46
    0

    今天看到一些代码,其实应该算是关于模块化相关知识范畴吧,因为用到了axios,所以取了这么一个标题

    基于axios封装的模块如下:

    fetch.js

    import axios from 'axios';
    
    // 创建axios实例
    const service = axios.create({
      timeout: 5000              
    });
    
    //删除拦截器部分代码
    
    export default service;
    

    调用该模块的其他模块:

    import fetch from '@/utils/fetch';
    function GetFetchPromise(
        url, 
        data = {},
        type = 'get',
        params = {},
        headers = {},
        timeout = 5000) {
        return fetch({//问题在这儿
            url: url,
            method: type,
            params: data,
            data: params,
            headers,
            timeout
        })
    }

    问题:
    1、在调用模块里面使用 fetch({/*很多键值对*/}),倒入进来的一个变量名fetch这儿怎么能当作方法使用呢?
    2、传进去的参数直接和覆盖fetch.js模块axios.create()参数是一个意思?
    3、fetch.js里面export default service;表示导出一个模块,那么在调用模块里面怎么不是fetch.xxxx()xxxx应为export对象的方法吧?但是axios.create()创建的这个对象并没有fetch()方法呀?

    1
    打赏
    收藏
    点击回答
        全部回答
    • 0
    • 轻烟薄暮 普通会员 1楼

      在使用axios库时,如果你需要封装模块,你可以创建一个自定义的模块,然后使用import导入这个模块。

      这是一个例子:

      javascript // 我们创建一个名为axiosModule的模块 // 定义一个封装的axios实例 export default axios = axios.create({ baseURL: 'http://api.example.com', timeout: 5000, headers: { 'Content-Type': 'application/json' } });

      然后,你可以在其他模块中导入并使用这个封装的axios实例:

      ```javascript // 使用axios模块 import axios from './axiosModule';

      // 使用axios实例 axios.get('https://api.example.com/data') .then(response => { console.log(response.data); }) .catch(error => { console.log(error); }); ```

      这样,你就创建了一个自定义的axios实例,这个实例只接收和发送你的定义的头部信息。你可以根据需要修改这个实例,包括添加更多的头部信息,或者修改发送请求的方法。

      如果你需要在项目中全局使用axios,你可以创建一个axios全局对象,然后在需要的地方导入这个全局对象:

      ```javascript // 创建一个axios全局对象 const axios = require('./axiosModule');

      // 在需要的地方导入axios全局对象 axios.get('https://api.example.com/data') .then(response => { console.log(response.data); }) .catch(error => { console.log(error); }); ```

      这样,你就可以在项目中全局使用axios了。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部