Vue项目安装axios实现http请求

---

前言

我们都知道前端是需要向后端异步请求一些数据和服务的，即所谓的ajax技术。而Vue.js本身是没有ajax的能力，因此它需要使用 axios 来完成 ajax 请求。

---

一、安装axios

Axios 是一个基于 Promise 的 HTTP 库，可以用在浏览器和 node.js 中

使用 npm：

$ npm install axios

使用 yarn：

$ yarn add axios

注意：在vue项目的根目录下安装，项目的配置文件package.json有其相应的版本号则安装成功

二、使用axios

1.引入axios

在main.js文件在注入axios：

import axios from 'axios'
Vue.prototype.$axios = axios  //等号前的$axios可以换成其他名称，不过使用要一致 

2.GET 方法

一个比较完整的格式：

this.$axios({ //这里的$axios就是在main.js中命名的
            method:"get",
            url:"http://wthrcdn.etouch.cn/weather_mini",//一个查询城市天气的API
            headers:{
              'Content-type': "application/json;charset=utf-8"
            },
            params : { //请求参数
              city : "广州"
            },
            dataType:'json',
          })
          .then((res)=>{
            console.log(res.data);
            console.log("成功")
          })
          .catch(function (error) {
            console.log(error);
            alert("服务器连接异常");
            console.log("失败")
          });

3.POST 方法

一个比较完整的格式：

this.$axios({
            method:"post",
            url:"http://test/...",
            headers:{
              'Content-type': "application/json;charset=utf-8"
            },
            data : { //请求参数
              a : '',
              b : ''
            },
            dataType:'json',
          })
          .then((res)=>{
            console.log(res.data);
            console.log("成功")
          })
          .catch(function (error) {
            console.log(error);
            alert("服务器连接异常");
            console.log("失败")
          });

---

总结

对于axios，在不究其原理的情况下，使用并不太难。而且通过上面的get和post方法也可以发现，其语法和JQuery的ajax很相似，我们也很容易上手使用。