1.15、axios的使用

十五、axios的使用

1.安装axios组件

cnpm install axios -s //先在项目安装axios这个组件
cnpm install //安装一下axios需要的其他插件

2.在main.js加入axios

import axios from 'axios'
import VueAxios from 'vue-axios'
Vus.use(VueAxios,axios)

3.发送ajax请求

//get,参数放到url后面
this.axios({
  method:"get",
  url:"http://url?name="+name+"&title="+title
}).then((response)=>{
   console.log(response);
});

//post，参数加入data中  
this.axios({
  method:"post",
  url:"http://url",
  data:{
     name:name,
     title:title
  }
}).then((response)=>{
   console.log(response);
});

4.axios注意点

前端向后端传输数据时，如果是get传输，直接传在url后；如果是post传输，则在请求体body中传输。

在body中的数据格式又有两种，一种是 json 数据格式，另一种是 字符串。具体要用哪种格式取决于后端入参的格式。

如果后端接收json数据类型，post 的 headers 需要设置 { ‘content-type’: ’application/json’ }，传给后端的数据就形如 { ‘name’:’edward’, ‘age’:’25’ }

如果后端接收的是（表单）字符串类型，post 的 headers 需设置 { ‘content-type’: ’application/x-www-form-urlencoded’ }，

，传输给后端的数据就形如 ‘name=edward&age=25’

如果想改变axios的post请求，带参协议有两种方式