vue axios 学习笔记

前端之家收集整理的这篇文章主要介绍了vue axios 学习笔记前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

axios 学习笔记

  1. 安装和引用
  2. 在组件中使用
  3. 基本用法

1.安装和引用

1.1 首先需要使用npm安装axios

npm install axios --save-dev

1.2 在vue项目中启用axios
这里有两种方法,第一种是把axios绑定到Vue的原型属性上:

// main.js

import Vue from 'vue'
import axios from 'axios'

Vue.prototype.$http = axios

注意:这里在引入axios后,不是使用"Vue.use()"

第二种方法,是结合"vue-axios"使用.安装完axios后再安装vue-axios,然后像使用插件一样,启用vue-axios

npm install vue-axios --save-dev
// main.js

import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(VueAxios,axios)

第二种方法相对于第一种更安全.因为第一种方法是直接在Vue上添加了原型属性,如果项目中还有其他的人员也在使用axios,那么就会可能造成冲突.而第二种方法是vue插件的写法,避免了多人协作时,axios的冲突

2.在组件中使用

上述两种引用axios的方法,都会在Vue中添加"$http"的属性,那么在组件中使用时直接使用这个属性即可.

// 组件 my-component.vue

export default {
data: () => ({
list: []
}),methods: {
GET_DATA() {
this.$http.get("api/list").then(res => {
console.log(res);
this.list = res.data.data;
});
}
},};

3.基本用法

常用方法为 'get' 和 'post',但是两者在传递参数时,写法不同.

3.1 get

this.$http.get("api/list?id=101").then(res => {
  console.log(res);
});

或者

this.$http.get("api/list",{params:{id:101}}).then(res => {
  console.log(res);
});

3.2 post

this.$http.post("api/list",{id:101}).then(res => {
  console.log(res);
});

另外一点,有点时候post请求传递的参数无法传到后端,是因为传递参数的格式不对.需要进行转化.

// 组件中

// qs模块是axios安装时自带的模块
import Qs from 'qs

// 转化参数格式
this.$http.post("api/list",Qs.stringify({id:101})).then(res => {
console.log(res);
});

猜你在找的程序笔记相关文章