axios的http简单用法

墨蓝 2022-11-07 05:25 141阅读 0赞

# 1.  axios简介 #

axios是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。

特点：

*  从浏览器中创建 XMLHttpRequests
 *  从 node.js 创建 http 请求
 *  支持 Promise API
 *  拦截请求和响应
 *  转换请求数据和响应数据
 *  取消请求
 *  自动转换 JSON 数据
 *  客户端支持防御 XSRF

# 2.几个http的简单用法 #

get： 获取数据

post：提交数据（表单数据、文件上传）

put：更新数据， 将所有数据推送到后端

patch：更新数据，只将修改的数据推送到后端

delete：删除数据

## 2.1  get请求 ##

##         ##

<script>
        import axios from 'axios'
    
        export default {
            name:'axios-exercise',
            components:{},
            created() {
                // data.json是前端手动设置的请求数据，供请求演示用
                // params传参可选
                // 当前请求路径类似 http://localhost:8080/data.json?id=12
                axios.get('/data.json',{params:{id:12}}).then(res => {
                  console.log(res)  
                })
    
                //另外一种写法
                axios({
                    method:'get',
                    url:'/data.json',
                    params:{
                        id:12
                    }
                })
            }
        }
    </script>

##  2.2 post请求 ##

<script>
        import axios from 'axios'
    
        export default {
            name:'axios-exercise',
            components:{},
            created() {
                // post请求传的数据有两种写法：
                // formData 或者 applicaton/json
                // formData 主要用于表单提交或者文件上传
                // application/json 现在比较流行的写法
                let data = { id:12 }
                axios.post('/post',data).then(res => {
                  console.log(res)  
                })
    
                //formData写法
                let formData = new FormData();
                for(let key in data){
                    formData.append(key,data[key])
                }
                axios.post('/post',formData).then(res => {
                  console.log(res)  
                })
            }
        }
    </script>

## 2.3 put和patch请求 ##

<script>
        import axios from 'axios'
    
        export default {
            name:'axios-exercise',
            components:{},
            created() {
                let data = { id:12 }  //在请求体中显示data
                let data1 = { params:data } //在请求路径中显示data
                axios.put('/put',data).then(res => {
                  console.log(res)  
                })
                axios.put('/put',data1).then(res => {
                  console.log(res)  
                })
                或者
                axios({ method:'put',url:'/put',data }).then(res => {
                  console.log(res)  
                })
                axios({ method:'put',url:'/put',data1 }).then(res => {
                  console.log(res)  
                })
    
    
    
                axios.patch('/patch',data).then(res => {
                  console.log(res)  
                })
                axios.patch('/patch',data1).then(res => {
                  console.log(res)  
                })
                或者
                axios({ method:'patch',url:'/patch',data }).then(res => {
                  console.log(res)  
                })
                axios({ method:'patch',url:'/patch',data1 }).then(res => {
                  console.log(res)  
                })
            }
        }
    </script>

## 2.4  delete请求 ##

<script>
        import axios from 'axios'
    
        export default {
            name:'axios-exercise',
            components:{},
            created() {
                let data = { id:12 }  //在请求体中显示data
                let data1 = { params:data } //在请求路径中显示data
                axios.delete('/delete',data).then(res => {
                  console.log(res)  
                })
                axios.delete('/delete',data1).then(res => {
                  console.log(res)  
                })
        
                或者
                axios({
                    method:'delete',
                    url:'/delete',
                    data
                }).then(res => {
                  console.log(res)  
                })
                axios({
                    method:'delete',
                    url:'/delete',
                    data1
                }).then(res => {
                  console.log(res)  
                })
        }
    </script>

## 3. 并发请求 ##

同时进行多个请求，然后统一处理请求返回的数据。

axios.all    和 axios.spread

<script>
        import axios from 'axios'
    
        export default {
            name:'axios-exercise',
            components:{},
            created() {
                axios.all([
                    axios.get('/data.json'),
                    axios.get('/city.json'),
                ]).then(
                    axios.spread((dataRes,cityRes)=>{
                        console.log(dataRes,cityRes)
                    })    
                )
            }
        }
    </script>

# 4. 拦截器 #

拦截器： 在请求或者响应被处理前拦截它们

## 4.1 请求拦截器 ##

<script>
        import axios from 'axios'
    
        export default {
            name:'axios-exercise',
            components:{},
            created() {
               axios.interceptors.request.use(config => {
                    //在发送请求前做的事情
                    return config
                },err => {
                    // 在请求错误的时候，做的内容
                    return Promise.reject(err)
                }) 
            }
        }
    </script>

## 4.2 响应拦截器 ##

<script>
        import axios from 'axios'
    
        export default {
            name:'axios-exercise',
            components:{},
            created() {
               axios.interceptors.response.use(res => {
                    //请求成功对响应数据做的处理
                    return res     //这儿的内容会到达 axios.get().then(res => {}) 中的res位置
                },err => {
                    //响应错误做的内容
                    return Promise.reject(err)   // 这儿的err会回到 axios.get().then().catch(err => 这里) 
                }) 
            }
        }
    </script>

请求错误和响应错误，拦截器那儿的处理，最终都回到 axios.get().then().catch()

## 4.3 移除拦截器 ##

用的不多

const myInterceptor = axios.interceptors.request.use(function () {/*...*/})
    axios.interceptors.request.eject(myInterceptor);

详细的axios的用法，见 axios文档：[http://www.axios-js.com/zh-cn/docs/\#axios-all-iterable][http_www.axios-js.com_zh-cn_docs_axios-all-iterable]

[http_www.axios-js.com_zh-cn_docs_axios-all-iterable]: http://www.axios-js.com/zh-cn/docs/#axios-all-iterable

发表评论取消回复

表情：

评论列表（有 0 条评论，141人围观）

还没有评论，来说两句吧...

相关阅读

相关 axios的http简单用法

1. axios简介 axios是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。特点：

墨蓝/ 2022年11月07日 05:25/ 0 赞/ 142 阅读

相关 vue中axios基本用法

1.首先安装axios： 1)：npm install 2)：npm install vue-axios --save 3)：np

古城微笑少年丶/ 2022年10月25日 04:48/ 0 赞/ 197 阅读

相关 axios 里post和get的用法

get： ![在这里插入图片描述][2c72743ec6de127fd376d3ef2265ae74.png] post： ![在这里插入图片描述][854adf

﹏ヽ暗。殇╰゛Y/ 2022年08月30日 14:58/ 0 赞/ 208 阅读

相关 KVC的简单用法

// // KVCDemo.h // OC基础学习 // // Created by 麦子 on 15/6/2. //

叁歲伎倆/ 2022年08月05日 02:42/ 0 赞/ 152 阅读

相关 adb的简单用法

一：运行adb 1.直接运行在你的android—IDE中找到D:\\android\\adt-bundle-windows-x86\_64-20131030\\sdk\

向右看齐/ 2022年07月16日 04:23/ 0 赞/ 343 阅读

相关 PopupWindow的简单用法

首先创建弹出框的布局 layout\_popupwindow <?xml version="1.0" encoding="utf-8"?> <LinearL

客官°小女子只卖身不卖艺/ 2022年07月15日 10:44/ 0 赞/ 267 阅读

相关 React之axios的基本用法

1：简单介绍及安装 Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。安装： npm

谁借莪１个温暖的怀抱￠/ 2022年05月20日 05:43/ 0 赞/ 220 阅读

相关 c# @ $ $@的简单用法

public void Test() { //1.字符串可直接换行 //特别注意:结果包含了隐藏

深碍√TFBOYSˉ_/ 2022年03月01日 18:50/ 0 赞/ 351 阅读

相关 axios基本用法

一.axios 1.什么是axios axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端。简单的理解就是ajax的封装它本身具有

╰+哭是因爲堅強的太久メ/ 2021年09月15日 02:54/ 0 赞/ 511 阅读

相关 Git的简单用法

远程建库 1. ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9

迈不过友情╰/ 2021年07月24日 22:58/ 0 赞/ 420 阅读