axios（三）axios的介绍和特点

axios的介绍和特点

3.1 axios是什么？

1. 前端最流行的ajax请求库
2. react/vue官方都推荐使用axios发ajax请求
3. 文档：https://github.com/axios.axios

3.2 axios特点

1. 基于promise的异步ajax请求库
2. 浏览器端/node端都可以使用
3. 支持请求/响应拦截器
4. 支持请求取消
5. 请求/响应数据转换
6. 批量发送多个请求

3.3 axios常用语法

axios(config)：通用/最本质的发任意类型请求的fs

aios(url[, config])：可以指定url发get请求

axios.request(config)：等同于axios(config)

axios.get(url[, config])：发get请求

axios.delete(url[, config])：发delete请求

axios.post(url[, data, config])：发post请求

axios.put(url[, data, config])：发put请求

axios.defaults.xxx：请求的默认全局配置

axios.interceptors.request.use()：添加请求拦截器

axios.interceptors.response.use()：添加响应拦截器

axios.create([config])：创建一个新的axios（它没有下面的功能）

axios.Cancle()：用于创建取消请求的错误对象

axios.CancleToken()：用于创建取消请求的token对象

axios.isCancle()：是否是一个取消请求的错误

axios.all(promise)：用于批量执行多个异步请求

axios.spread()：用来指定接收所有成功数据的回调函数的方法

//指定默认位置
axios.defaults.baseURL = 'http://localhost:3000'

//1.GET请求：从服务器端获取数据
function testGet(){
   
    axios({
   
        url: '/posts',
        params: {
   
            id: 1
        }
    })
}.then(response => {
   
    console.log('/posts get', response.data)
})

//2.POST请求：向服务器端添加新数据
function testPost(){
   
    axios({
   
        url: '/posts',
        method: 'POST',
        data: {
   "title": "json-server4", "author": "typicode"}
    }).then(response => {
   
        console.log('/posts post', response.data)
    })
}