VUE中关于axios的原生使用方法

原生使用方法:

1.首先下载axios插件

2.在入口文件 main.js 中引入axios

import axios from 'axios'
//然后进行全局注册  (这里的$axios是自己的取的名字 应该是约定俗成写成这样)
Vue.prototype.$axios = axios

3.当你在组件中有具体的axios请求时

//这个可以写在created中

this.$axios({
    method:'',
    url:'因为没有进行封装 这里需要写完整的url',
    headers:''
    ...等等一些配置项
    
}).then (res => {console.log(res) }) .catch( res =>{ console.log(res)  })
//.then  小括号内的 res 就是请求成功后返回的数据
//.catch 的res为请求失败 返回的数据
//如果请求成功  需要在data中定义一个变量 X 来接收经过处理过的 res 
//比如 this.X = res.data.data 
//然后再利用这个X 来进行后续操作  如:组件之间的传递数据 v-for来进行遍历 
//利用this.$store.commit('mutations中的函数名',X是传给这个函数的数据) 来进行数据的存储
//因为store具有响应式的特点,数据改变 页面上显示的也会随之改变

你可能感兴趣的:(vue.js,javascript,前端)