axios是第三方封装库，作用是在框架中使用数据请求
文档说明地址：https://www.npmjs.com/package/axios
安装：
(1)npm
$ npm install axios –S
(2)CDN
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
特点：
- 1. 它在浏览器中创建的是浏览器对象
- 2. 它底层是用Node.js中的http模块实现的
- 3. 支持Promise
- 4. 可以拦截请求和响应
功能： loading加载效果、登录拦截
- 5. 转换请求和响应数据
- 6. 自动转换为JSON数据
- 7. 客户端支持防止XSRF
- 8. axios会自动封装数据
使用：
一、模拟数据
1.Mock模拟数据的请求
(1)mock.js生成(在mock 目录)
(2)线上拷贝
(3)线上的 http://jsonplaceholder.typicode.com/
2.后端接口的请求
后端渲染模板：https://www.showdoc.cc/
二、发送请求
(1)get请求
无参数：
axioa写在vue里面的methods下面的函数里
1 reg () { 3 axios({ 4 url: ` `, 5 method: ‘GET‘,//默认就是get请求，这个可以不写 6 params: { 7 a: 1, 8 b: 2 9 } 10 }).then( res => { 11 console.log( res ) 12 }).catch( err => console.log( err )) 13 }
或者
1 axios.get(‘./mock/data/data.json‘) 2 .then( res => { 3 console.log( res ) 4 }) 5 .catch( err => console.log( err )) 6 }
有参数：
1 axios.get(`${ DEV_BACK_URL }/shop`,{ 2 params: { //get请求携带参数 3 a: 1, 4 b: 2 5 } 6 }).then( res => { 7 console.log( res ) 8 }).catch( error => console.log( error ))
get请求携带参数用params (2)post请求 post请求必须先设置请求头 1 /* 统一设置post请求头 */
2 axios.defaults.headers.post[‘Content-Type‘] = ‘application/x-www-form-urlencoded‘;
3 new Vue({
4
1 const p = new URLSearchParams() //得到参数携带对象
2 // p.append( 参数，参数值 )
3 p.append( ‘username‘,‘张骏‘ )
4 p.append( ‘password‘,‘123‘ )
5 p.append( ‘name‘,‘骏哥‘ )
6 axios({
7 url: `${ DEV_BACK_URL }/register`,
8 data: p,// post请求携带参数的配置项
9 method: ‘POST‘,
10 withCredentials: true,
11 }).then( res => console.log( res ))
12 .catch( err => console.log( err ))
post请求携带参数的用data，用p.append添加参数