• 关于axios及其在vue中的配置


      什么是axios?官方解释:axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。

      具有以下特点:

    • 从浏览器中创建 XMLHttpRequests
    • 从 node.js 创建 http 请求
    • 支持 Promise API
    • 拦截请求和响应
    • 转换请求数据和响应数据
    • 取消请求
    • 自动转换 JSON 数据
    • 客户端支持防御 XSRF

      但是对于目前的我而言,它就是一种用来发送网络请求的方法。

      使用axios发送请求很简单,代码也极其条理化。

      安装方法:

      (1)、使用npm:

      $ npm install axios

      (2)、使用bower:

      $ bower install axios

      (3)、使用CDN加速服务

      例如:<script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>

      使用axios发送请求:

      1、执行get请求: 

    // 为给定 ID 的 user 创建请求
    axios.get('/user?ID=12345')
    .then(function (response) {
        console.log(response);
    })
    .catch(function (error) {
        console.log(error);
    });
    
    // 可选地,上面的请求可以这样做
    axios.get('/user', {
        params: {
            ID: 12345
        }
    })
    .then(function (response) {
        console.log(response);
    })
    .catch(function (error) {
        console.log(error);
    });    
    

      

      2、执行post请求:

    axios.post('/user', {
        firstName: 'Fred',
        lastName: 'Flintstone'
    })
    .then(function (response) {
        console.log(response);
    })
    .catch(function (error) {
        console.log(error);
    });
    

      

      3、执行多个并发请求:

    function getUserAccount() {
        return axios.get('/user/12345');
    }
    
    function getUserPermissions() {
        return axios.get('/user/12345/permissions');
    }
    
    axios.all([getUserAccount(), getUserPermissions()])
    .then(axios.spread(function (acct, perms) {
        // 两个请求现在都执行完成
    }));
    

      

      当然也可以通过向axios传递相关配置来创建请求,例如,我们在vue项目中使用axios来发送请求,这种方式就及其必要了。举例说明:我们在写项目的时候,有时候用的是一个接口地址,但是后期因为某种原因需要变更接口地址,这种情况下,假如我们之前创建请求时都是使用的绝对路径,也就是绝对的url,而我们知道一个项目中通常会包含许多的请求,遇到这种情况就必须一个一个的去改了。

      但是,如果我们在axios配置中配置一个baseURL,后面在发送请求的时候,只需要写上接口的相对url就行了。这种情况下,如果遇到需要更改接口地址的话,只需要更改配置项中的baseURL即可,而不用一个一个的去更改,是不是就方便多了。

      这里以基于iview的后台管理为例(可参考 基于iview的后台管理),在项目的index.html文件中,引入axios文件,可通过CDN方式引入,然后就可以在src/main.js文件中添加baseURL,如:

    axios.defaults.baseURL = 'https://some-domain.com/api/';
    

      

      这样在其他要发送请求的地方只需要这样写即可:

    global.axios.post('adminN_1.service', {
        // 接口的上传参数
    })
    .then(data => {
        console.log('返回数据', data)
    })
    .catch(e => {
        console.log(e)
    })
    

      

      说明:

      (1)、如果没有指定 method,请求将默认使用 get 方法。

      (2)、`baseURL` 将自动加在 `url` 前面,除非 `url` 是一个绝对 URL。通过设置一个 `baseURL` 便于为 axios 实例的方法传递相对 URL,这样也便于以后更改接口地址

  • 相关阅读:
    类和对象代码练习1
    搬迁MSSQL出现的问题
    QQ群空间是我见过最烂的系统
    导出表数据脚本的存储过程 [转自CSDN]
    plesk for Linux 没有默认首页的优先级别设置
    传说中的otag开源是假的。BS!!!!!
    FTP关闭mput上传确认
    刚装的vs2008不能生成silverlight,郁闷中
    怎么查域名反向解析是否成功
    现在的黑客太有才了。。。/不喜欢开防火墙的要小心
  • 原文地址:https://www.cnblogs.com/jf-67/p/8487769.html
Copyright © 2020-2023  润新知