axios请求五种方法

一、介绍

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

可以提供以下服务:

1、从浏览器中创建XMLHttpRequests

2、从node.js创建http请求

3、支持PromiseAPI

4、拦截请求和响应

5、转换请求数据和响应数据

6、取消请求

7、自动转换JSON数据

8、客户端支持防御XSRF

二:使用

1、axios的安装: 

  安装命令; npm install axios

2、axios五种请求:

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

复制代码

不带参数      
方式一: axios({ methods: 'get', url: '/ulr' })
方式二: axios.get('/url')

1

2

3

4

5

6

7

8

9

带参数

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

    方式二: axios({

                   methods: 'get',

                   url: 'url',

                   params: {

                        id:12

                   }

               })

复制代码

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

1

2

3

4

5

6

7

8

9

10

let data = {}

 let config = {}

 方式一:  axios.post('/url',data,config)

  

 方式二:  axios({

   methods: 'post',

   url: '/url',

   data: data,

   config: config

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

   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就行 

Logo

CSDN联合极客时间,共同打造面向开发者的精品内容学习社区,助力成长!

更多推荐