vue中axios的引入和使用

axios的官网地址：http://www.axios-js.com/docs/vue-axios.html

npm方式安装axios ： npm i axios vue-axios

axios的引入：

utils/axios-----文件目录
// utils: 小工具

// 引入相关的模块
import Vue from 'vue' 
import axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(VueAxios, axios) //参数顺序固定, 不可颠倒
// 当前文件必须在 main.js 中引入, 才能触发效果

main.js的引入

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
// 引用axios,触发其中的代码, .js后缀名可以省略
import './utils/axios

Vue.config.productionTip = false
new Vue({
  router,
  store,
  render: h => h(App),
}).$mount('#app')

页面中使用：

  methods: {
    getData() {
      let url = 'http://XXXXXXXXXXX'
      // 成功触发then, 失败触发catch
      this.axios
       .get(url)
       .then(res => {
          console.log(res)
          // 远程存本地
          this.data = res.data
       })
       .catch(err => console.log(err))
   },
 },

页面中使用axios也可以用如下请求方式：

 getDate() {

      let that = this;

      this.axios({

        method: "get",

        url: "XXXXXX",

        params: {},

      }).then(

        (res) => { },

        (err) => { }

      );

    },