• 关于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,这样也便于以后更改接口地址

  • 相关阅读:
    vue开发chrome扩展,数据通过storage对象获取
    Vue手动集成less预编译器
    Google Translate寻找之旅
    Javascript Range对象的学习
    Javascript Promises学习
    SublimeText 建立构建Node js系统
    We're sorry but demo3 doesn't work properly without JavaScript enabled. Please enable it to continue.
    npm安装包出现UNMET DEPENDENCY报错
    (转载)命令行说明中格式 尖括号 中括号的含义
    Linux重启网卡服务Failed to start LSB: Bring up/down networking.
  • 原文地址:https://www.cnblogs.com/jf-67/p/8487769.html
Copyright © 2020-2023  润新知