Axios的那些事

1.是什么？

Axios是一个基于promise的http库（类似于jQuery的ajax，用于http请求）
可以用于浏览器和node.js (可用于客户端或node编写的服务端)

2.有哪些特性？

支持Promise API
拦截请求和响应（请求前和响应前做一些操作，比如在请求前的请求头中加一些授权信息等）
转换请求数据和相应数据 （比如请求时一些敏感信息需要加密，回来进行解密）
取消请求
自动转换JSON数据 （一般进行http请求时服务器传输的是字符串，进行自动转换，不用手动操作）
客户端支持防御XSRF攻击

3.兼容？

常见浏览器支持，IE支持8以上

4.基础用法（get,post,put,patch,delete等请求方法）

a. 安装axios: yarn add axios 或者 npm install axios

    查看package.json中的dependencies是否安装成功 (在vue框架操作)

b. 在Home.vue中引入：import axios from ‘axios’

c. 在生命周期中执行一个请求

    created(){

  <!-- get第一种写法 -->
                // http://localhost:8080/地址?id=12
            axios.get('/地址',{
                params:{
                    id:12
                }
            }).then((res)=>{
                console.log(res)
                 //返回的信息：  配置：config--method 、url
                             // 数据：data
                             // 请求头：headers
                             // 状态：request
            })
        
 <!-- 另一种写法 -->
 
            axios({
                method:'get',
                url:'/地址',   //相对域名，相对于前端启动http://localhost:8080/
                params:{
                    id:12
                }
            }).then(res=>{
                console.log(res)
            })

<!-- post  -->
            //applicition/json  请求
<!-- post 第一种写法 -->

            let data ={
                id:12
            }
            axios.post('/地址',data).then(res=>{
                console.log(res)
            })


  <!-- post 另一种写法 -->
  
            axios({
                method:'post',
                url:'/地址',
                data:data
            }).then(res=>{
                console.log(res)
            })

<!-- post  -->
	   //form-data 表单提交（图片上传，文件上传）    （不常用）
	   		 let data ={
                id:12
            }
            let formData = new FormData()
            for(let key in data){   //key 是id   data[key]是12  
                formData.append(key,data[key])  //添加
            }
            axios.post('/地址',formData).then(res=>{
                console.log(res)
                //查看Network,相比较于applicition/json请求，发现Content-Type不同（把参数编码，后台会去解析
            })

	  //put 和 patch 请求方式和post类似（也有applicition/json和form-data）同上
            axios.put('/地址',data).then(res=>{
                console.log(res)
            })
        
            axios.patch('/地址',data).then(res=>{
                console.log(res)
            })

	  //delete 请求 (具体怎么写，需要跟后台进行沟通)
	<!-- one-->
                //参数会在url上拼接，Query String Parameters
                axios.delete('/delete',{
                    params:{
                        id:12
                    }
                }).then(res=>{
                    console.log(res)
                })


 	<!-- two -->
 	
                //参数不会在url上拼接，参数在Request Payload
                axios.delete('/delete',{
                    data:{
                        id:12
                    }
                }).then(res=>{
                    console.log(res)
                })

    }

d.请求方式具体是由后端定义，可协商希望用哪种

  get:获取数据
  post:新建，提交数据（表单提交+文件上传：图片、json文件、excel）
  put:更新数据 （所有数据推送到后端，后端将数据更新到数据库中） 
  patch:更新数据（只将修改的数据推送到后端）
  delete:删除数据 

e.并发请求：同时进行多个请求，并统一处理返回值

    例：聊天系统需要同时展示个人信息和好友列表，而这是通过两个接口来请求的，需要同时处理两个接口的数据 

	 created(){
            //axios.all()  axios.spread()
            axios.all(
                [   //数组，里请求
                    axios.get('/data.json'),
                    axios.get('/city.json')
                ]
            ).then(  //不是回调函数,是spread方法的回调函数
                axios.spread((dataRes,cityRes)=>{
                    console.log(dataRes,cityRes)
                })
            )
        }

5.进阶用法（实例，配置，拦截器，取消请求等）

a.实例

    //当后端接口地址有多个，并且超时时长不一样，很繁琐
     在实例中配置这两种参数，用实例去请求，方便

	  created(){
            let instance = axios.create({
            	baseURL:'http://localhost:8080',  
            	timeout:1000, 

            })
            let axios2 = axios.create({
            	baseURL:'http://localhost:8081',
            	timeout:3000

            })
            instance.get('/地址').then(res=>{
            })
            axios2.get('/地址',{
				    timeout:5000
				}).then(res=>{
           		})

		//不创建实例，直接axios.get也行，但是要确定在整个项目里面用的是一种后端域名，
		//如果是用了两个后端域名，或者是不同接口需要的超时时长不一样，此时就需要创建一个实例了
        }

超时时长：发起http请求时，如果服务端长时间没有返回数据，接口会报超时401

一般具体的超时时长由后端进行定义，请求了一个特别大的数据后端进行处理，一旦处理时间过长，比如超过1秒，后端会返回401，告诉你超时了，前端也需要做一些处理

超时处理的原因：请求时间过长，会阻塞后端的内容，给服务器造成很大的压力，所以要及时释放不需要的，超时了就不需要了，请求就取消了

b.配置参数都有哪些？

axios.create({
        	baseURL:'http://localhost:8080',  		/ /请求的域名，基本地址
        	timeout:1000,				//请求的超时时长 (ms)
        	url:'/地址',		//请求路径
			method:'get,post,put,patch,delete',			//请求方法
			headers:{
			    token:''     //如登录需要一个token来识别当前用户的信息，需要把token传递给后端
			},      //请求头
			params:{},   //请求参数拼接在url上
			data:{},      //请求参数拼放在请求体
			
        })

	axios全局配置  (优先级：低)  (用的少，局限性较大)
	
		axios.defaults.timeout = 1000
		axios.defaults.baseURL = 'http://localhost:8080'
		
	axios实例配置  （中）
	
		let instance = axios.create()
		instance.defaults.timeout = 3000
		
	axios请求配置   （高）  （用的多）
	
		instance.get('/某一个地址'，{
		    timeout:5000
		})

c.拦截器

6.进一步封装，在项目中的实际应用

Status Code:304 (正常是第一次返回的接口是200，第二次访问这个接口的时候数据没有变化，浏览器会自动识别返回状态304，没有更改，重定向，这样资源加载会更快)

查阅…理解…归纳…持续更新…