Axios使用总结

一.介绍

axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端。简单的理解就是ajax的封装

它本身具有以下特征：

• 从浏览器中创建 XMLHttpRequest
• 从 node.js 发出 http 请求
• 支持 Promise API
• 拦截请求和响应
• 转换请求和响应数据
• 取消请求
• 自动转换JSON数据
• 客户端支持防止 CSRF/XSRF

二.使用

1.axios的安装

安装命令npm install axios

2、axios五种请求:

1.get: 一般多用于获取数据

不带参数    　　
方式一: axios({ methods: 'get', url: '/ulr' })
方式二: axios.get('/url')
 
带参数
    方式一: axios.get('/url', {params: {id: 12}})  //请求的地址实际为 localhost:8080/url?id=12
    方式二: axios({
                   methods: 'get',
                   url: 'url',
                   params: {
                        id:12
                   }
               })

2.post: 主要提交表单数据和上传文件

 let data = {}
 let config = {}
 方式一:  axios.post('/url',data,config)
  
 方式二:  axios({
           methods: 'post',
           url: '/url',
           data: data,
           config: config
          })　　　　
其中 data可以有两种格式form-data(图片上传,文件上传)  applicition/json（目前比较流行）     
上面两种方法 都是 appliction/json格式　　　　
如下为: form-data
　　　　let formData = new FormData()
       let data = {
　　　　　　id: 12
　　　　}
       for (let key in data) {
　　　　    formData.append(key, data[key]) //创建form-data格式数据
       }
　　　　 axios({
　　　　　　methods: 'post',
　　　　    url: '/url',
　　　　　　data: formData
　　　　 })
　该请求发出之后可以在浏览器中查看此次请求的request header里面content-type: 为 form-data形式

3.put对数据全部进行更新

该请求和post类似，只是请求方法不同

4.patch只对更改过的数据进行更新

  该请求和post类似，只是请求方法不同

5.delete删除请求(参数可以放在url上也可以和post一样放在请求体中)

axios.delete('/url', {params: {id: 12}})  参数在url params很重要

axios.delete('/url', {data: {id: 12}}) 参数在请求体中 将params改为 data就行