前端axios的安装使用

什么是Axios

        Axios 是一个基于 promise 网络请求库，作用于node.js 和浏览器中。 它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生 node.js http 模块, 而在客户端 (浏览端) 则使用 XMLHttpRequests。

        对于热爱学习以及想深入了解axios的同学，axios的文档地址和源码地址我贴到下面，感兴趣可自行研究：

        axios文档地址：https://www.axios-http.cn/docs/intro

        axios源码地址：https://github.com/axios/axios

安装

        首先axios的安装我们这边只讲述npm的方法，其他的方法自行去官网找答案：

$ npm install axios

在终端运行以上方法安装axios。

引用axios

        1、页面引用：在需要使用Axios的.js或.vue文件中，通过import语句来引入Axios：

import axios from 'axios';

        然后就可以在文件中写axios的方法了

        2、全局引用：如果要在全局直接调用axios，就需要把axios挂载到vue的原型上面，一般是在main.js当中，或者本地项目的其他入口文件中。引用后加入一下代码：

import axios from 'axios';

Vue.prototype.$axios = axios;

接下来就可以在代码的方法中直接调用this.$axios，来实现Axios的访问了。

使用Axios

        axios使用起来就很方便了。以下拿get请求举例，剩余三种请求类似就不过多赘述。

// 如果已经全局注册，该引用可以忽略
import axios from 'axios';


// 未全局注册的使用
let url   // 数据的接口
let params = {} // 接口的传值
axios.get(url, params).then(function (res) {
    // 处理成功情况
    console.log(res);
  })
  .catch(function (error) {
    // 处理错误情况
    console.log(error);
  })
  .finally(function () {
    // 总是会执行
  });
//全局注册的使用
this.$axios.get(url, params).then(function (res) {
    // 处理成功情况
    console.log(res);
  })
  .catch(function (error) {
    // 处理错误情况
    console.log(error);
  })
  .finally(function () {
    // 总是会执行
  });

---------------------------------------------------------------------------------------------------------------------------------

        愿世界永无bug