vue-cli--axios的五种请求接口方式

目录

一、Axios介绍

二、axios的请求方法：get、post、put、patch、delete

1、get

2、post

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

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

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

一、Axios介绍

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

可以提供以下服务:

1、从浏览器中创建XMLHttpRequests

2、从node.js创建http请求

3、支持PromiseAPI

4、拦截请求和响应

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

6、取消请求

7、自动转换JSON数据

8、客户端支持防御XSRF

二、axios的请求方法：get、post、put、patch、delete

get：获取数据

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

put：更新数据（所有数据推送到后端）

patch：更新数据（只将更改的数据推送到后端）

delete：删除数据

1、get

不带参数 

方式一: axios({ 
            url: '/ulr',
            methods: 'get'
        })

方式二: axios.get('/url')

带参数(参数被拼接在url地址上，或者被包裹在params属性对象内)

// 方式一:
axios.get('/url', {params: {id: 12}})  //请求的地址实际为 localhost:8080/url?id=12
// 方式二:
axios({
    methods: 'get',
    url: 'url',
    params: {
        id:12
    }
}) 
// 方式三：
axios.get('/url?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形式<br>

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