axios的介绍与使用

axios

1.什么是axios

axios不是一门新的技术。

Axios是一个基于promise的HTTP库，简单的讲就是可以发送get、post等请求。

本质上是对原生Ajax的封装，只不过它是Promise的实现版本。

2.为什么要使用axios

原生的ajax使用起来十分繁琐。原来发送http请求采用JQuery.ajax（）非常方便。既然已经开始使用vue进行前端开发，抛弃了对页面的DOM元素操作，再加载jQuery就十分多余了。买椟还珠。

Vue本身不支持Ajax请求，需要使用第三方插件。Vue1.0推荐大家使用vue-resource。16年尤玉溪发布消息，不再维护vue-resource，推荐大家使用axios。

3.下载安装

如果没有使用脚手架开发，还是用原来的HTML方式。

**<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.24.0/axios.js"></script>**

下载全局 axios

npm i -g axios

在vscode中下载第三方插件

npm i vue-axios

在vue模块化项目下引入
为了方便使用（一次性引入）main.js

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
//导入axios
import axios from "axios";
//导入vue-axios插件
import VueAxios from "vue-axios";

Vue.config.productionTip = false;

//想要在组件中使用axios，可以将导入的axios绑定到Vue的原型链上。
// Vue.prototype.$axios = axios;

//安装 (注册) 插件
Vue.use(VueAxios,axios);

new Vue({
  router,
  store,
  render: (h) => h(App),
}).$mount("#app");

使用json-server模拟数据
创建一个json-server文件夹
下载 json-server

npm install -g json-server

在这个文件夹下 创建一个db.json

{
  "book": [
    {
      "id": 2,
      "title": "西游记",
      "author": "吴承恩"
    },
    {
      "id": 3,
      "title": "红楼梦",
      "author": "施耐庵"
    },
    {
      "title": "红楼梦",
      "author": "施耐庵",
      "id": 4
    }
  ]
}

在Home.vue 组件 中处理数据

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png" />
    <br>
     <button @click="bookAdd">增</button>
      <button @click="bookDel">删</button> 
      <button @click="bookUp">改</button>
         <button @click="book">查询所有</button>
   <button @click="bookInfo">查询单个</button>
  </div>
</template>

<script>

export default {
  name: "Home",
  dada:{
   msg:[]
  },
  components: {
    // HelloWorld,
  },
  methods: {
    book() {
      //发送请求
      this.axios({
        // 设置请求的方式
        method:"get",
        //设置请求的URL
        url:"http://localhost:3000/book"
      }).then(resp=>{
        //请求成功之后，执行then的回调函数  resp就是结果
        console.log(resp);
      }).catch(err=>{
        //请求失败之后，执行catch的回调函数
        console.log(err);
      })
    },
      bookInfo() {
      //发送请求
      this.axios({
        // 设置请求的方式
        method:"get",
        //设置请求的URL
        url:"http://localhost:3000/book/1"
      }).then(resp=>{
        //请求成功之后，执行then的回调函数  resp就是结果
        console.log(resp);
      }).catch(err=>{
        //请求失败之后，执行catch的回调函数
        console.log(err);
      })
    },
      bookAdd() {
      //发送请求
      this.axios({
        // 设置请求的方式
        method:"post",
        //设置请求的URL
        url:"http://localhost:3000/book",
        data:{
          title:"红楼梦",
          author:"施耐庵"
        }
      }).then(resp=>{
        //请求成功之后，执行then的回调函数  resp就是结果
        console.log(resp);
      }).catch(err=>{
        //请求失败之后，执行catch的回调函数
        console.log(err);
      })
    },
      bookDel() {
      //发送请求
      this.axios({
        // 设置请求的方式
        method:"delete",
        //设置请求的URL
        url:"http://localhost:3000/book/1",
        // data:{
        //   title:"红楼梦",
        //   author:"施耐庵"
        // }
      }).then(resp=>{
        //请求成功之后，执行then的回调函数  resp就是结果
        console.log(resp);
      }).catch(err=>{
        //请求失败之后，执行catch的回调函数
        console.log(err);
      })
    },
      bookUp() {
      //发送请求
      this.axios({
        // 设置请求的方式
        method:"put",
        //设置请求的URL
        url:"http://localhost:3000/book/1",
        data:{
          title:"红楼梦",
          author:"施耐庵"
        }
      }).then(resp=>{
        //请求成功之后，执行then的回调函数  resp就是结果
        console.log(resp);
      }).catch(err=>{
        //请求失败之后，执行catch的回调函数
        console.log(err);
      })
    },
  },
};
</script>
<style  scoped>
  button{
    margin: 0 10px;
  }
</style>