axios在vue框架中的使用

 

axios概念

Axios是一个基于promise 的 HTTP 库，可以用在浏览器和 node.js中。axios本质上也是对原生XHR的封装，只不过它是Promise的实现版本，符合最新的ES规范。

 

axios和vue-axios

axios是一个库，并不是vue中的第三方插件，使用时不能通过Vue.use()安装插件，需要在原型上进行绑定。vue-axios是将axios集成到Vue.js的小包装器，可以像插件一样进行安装。

 

import axios from 'axios'

import VueAxios from 'vue-axios'

 

Vue.use(VueAxios, axios);

这样写的好处就是可以用this.axios直接调用

 

单页面调用axios请求

示例项目结构

image.png

 

list.json文件里保存了需要被请求的数据

App.vue应用了组件testAxios.vue

<template>

  <div id="app"><test-axios></test-axios></div>

</template>

 

<script>

import testAxios from "./components/testAxios.vue";

export default {

  name: "App",

  components: { testAxios },

  created() {},

  methods: {},

};

</script>

 

<style></style>

testAxios.vue单页面引用axios对本地数据进行请求

<template>

  <div>

    <ul v-for="item in datalist" :key="item.id">

      <li>

        <div>id:{{ item.id }}</div>

        <div>title:{{ item.title }}</div>

        <div>desc:{{ item.desc }}</div>

      </li>

    </ul>

  </div>

</template>

<script>

//引入axios

import axios from 'axios'

export default {

  name: "test-axios",

  data() {

    return {

      datalist: [],

    };

  },

  created() {

  //get请求本地数据

    axios.get("/zhihu/list.json").then((res) => {

      this.datalist = res.data.data.listInfo;

    });

  },

  methods: {},

};

</script>

<style lang="scss"></style>

全局配置axios

项目示例结构

image.png

 

main.js中全局配置axios

import Vue from 'vue'

import App from './App.vue'

import axios from 'axios'

import VueAxios from 'vue-axios'

 

 

 

Vue.use(VueAxios, axios);

axios.defaults.baseURL = "./static/data";

axios.defaults.timeout = 8000;

 

Vue.config.productionTip = false

new Vue({

  render: h => h(App),

}).$mount('#app')

testAxios.vue组件中使用get请求

<template>

  <div>

    <ul v-for="item in datalist" :key="item.id">

      <li>

        <div>id:{{ item.id }}</div>

        <div>title:{{ item.title }}</div>

        <div>desc:{{ item.desc }}</div>

      </li>

    </ul>

  </div>

</template>

<script>

export default {

  name: "test-axios",

  data() {

    return {

      datalist: [],

    };

  },

  created() {

    this.axios.get("/zhihu/list.json").then((res) => {

      this.datalist = res.data.data.listInfo;

    });

  },

  methods: {},

};

</script>

<style lang="scss"></style>

未完待续。。。