axios使用-请求

全局配置请求根路径

在 url 地址中,协议://域名:端口 对应的部分叫做“请求根路径”。

全局配置请求根路径的好处:提高项目的可维护性。

基于 axios 提供的固定配置,即可轻松配置请求的根路径。语法格式如下:

axios.defaults.baseURL = '请求根路径'

axios.defaults.baseURL = 'http://www.liulongbin.top:3006'

axios 请求方法的别名

概念

在实际开发中,常用的 5 种请求方式分别是: GET、POST、PUT、PATCH、DELETE

为了简化开发者的使用过程,axios 为所有支持的请求方法提供了别名:

  1. axios.get(url[, config])
  2. axios.post(url[, data[, config]])
  3. axios.delete(url[, config])(用法同get)
  4. axios.put(url[, data[, config]])(用法同post)
  5. axios.patch(url[, data[, config]])(用法同post)
  • get请求

    1)axios get请求别名写法

    axios.get('url地址').then(function(res){

    res 代表服务端响应结果

    })

    2)get请求如果带有查询参数

    axios.get('url地址', {params: {键:值}}).then(function(res){

    res 代表服务端响应结果

    })

    axios.get('/api/get',{params: {uname: '123', age: 18}}).then(function(res){
    console.log(res)
    })
  • post请求

    post请求别名写法

    axios.post('url地址', {键:值}).then(function(res){

    res 代表服务端响应结果

    })

    axios.post('/api/post', {uname: '123', age: 18}).then(function(res){
    console.log(res)
    })

axios 拦截器

概念

拦截器(interceptors)用来全局拦截 axios 的每一次请求与响应。

好处:可以把每个请求中,某些重复性的业务代码封装到拦截器中,提高代码的复用性。

a)拦截器概念来自于axios,如果使用axios,才能使用axios提供的拦截器

b)拦截器本质上在axios中就是一个高阶函数(拦截器就是一个函数)

拦截器的使用

在程序中,遇到代码封装时,使用函数

拦截器在程序中,如果遇到某个功能重复出现,那么可以使用axios中提供的拦截器实现

使用场景

当发送请求的时候,如果遇到相同效果(重复代码)都可以写到拦截器中

拦截器语法

请求拦截器

请求高阶函数,客户端发送请求时,会调用请求拦截器

方法:方法是一个函数,参数也是一个函数 ---- 高级函数

axios.interceptors.request.use(function (*config*) {

*// 发送请求前做些什么*

return *config*

}, function(*error*) {

*// 对请求错误做些什么*

return Promise.reject(*error*)

})

响应拦截器(服务端响应高阶函数,服务端响应数据时,会调用响应拦截器)

axios.interceptors.response.use(function (*response*) {

*// 对响应数据做点什么*

return *response*;

}, function (*error*) {

*// 对响应错误做点什么*

return Promise.reject(*error*);

});

<script src="./lib/axios.js"></script>
<script>
axios.defaults.baseURL = 'http://www.liulongbin.top:3006'
// 拦截器:需要写到请求之前,否则调用不到
// 演示请求拦截器
// 本质:一个函数,调用才执行,当发送请求时,会自动调用请求拦截器
axios.interceptors.request.use(function (config) {
// 发送请求前做些什么
console.log('请求拦截器演示,客户端发送了请求')
return config
}, function(error) {
// 对请求错误做些什么
return Promise.reject(error)
})
// 演示响应拦截器
// 本质:一个函数,调用才执行,发送请求后,当服务端有响应时,会自动调用响应拦截器
axios.interceptors.response.use(function (response) {
// 发送请求前做些什么
console.log('响应拦截器演示,服务端将要将响应数据发送给客户端')
return response
}, function(error) {
// 对请求错误做些什么
return Promise.reject(error)
})
// 当发送请求时,会自动调用请求拦截器
// 当服务端有响应时,会自动调用响应拦截器
axios.get('/api/get').then(function(res){
console.log('客户端接收到服务端发送的响应数据')
})
</script>
posted @   丫丫learning  阅读(372)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
点击右上角即可分享
微信分享提示