Vue基础-axios的使用

一、axios的使用

axios 是一个专门用于发送ajax请求的库(前端异步请求后端的技术)

• 官网: http://www.axios-js.com/
• 特点
  • 支持客户端发起Ajax请求
  • 支持服务端Node.js发送请求
  • 支持Promise相关语法
  • 支持请求和响应的拦截器功能
  • 自动转换JSON数据
• axios底层还是原生js实现的,内部通过Promise封装
• 原理:浏览器window接口的XMLHttpRequest

1.1 使用步骤

• 1.下载axios yarn add axios
• 2.引入axios import axios from 'axios'
• 3.配置基础接口地址
  • axios.defaults.baseURL =' 接口地址'
• 4.axios挂载Vue原型上 作为全局属性
  • Vue.prototype.$axios = axios

1.2 发起get请求获取数据

发起get请求不传递任何参数

  //axios()-原地得到Promise对象
            this.$axios({
                url: '/api/getbooks',
                method: 'GET', //默认就是get请求
            }).then(res => {
                console.log('接口获取成功', res);
            }).catch(err => {
                console.log('接口获取失败', err);
            })

发起get请求并传递参数

 		 this.$axios({
                url: '/api/getbooks',
                method: 'GET',
                params: { //会被axios拼接到url后面
                    bookname: this.iptStr
                }
            }).then(res => {
                console.log('查询成功', res);
            }).catch(err => {
                console.log('查询失败', err);
            })

1.3 发起post请求传递数据

		this.$axios({
                url: '/api/addbook',
                method: 'POST',
                data: this.obj
            }).then(res => {
                console.log('添加成功', res);
            }).catch(err => {
                console.log('添加失败', err);
            })

1.4 总结

ajax如何给后台传参

• 1.在url?拼接 --查询字符串(params)
• 2.在url路径上 --需要后端处理
• 3.在请求体/请求头传参给后台(data)

axios默认发给后台请求体数据格式是json字符串格式