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);

});