大家好，欢迎来到IT知识分享网。

全局配置请求根路径

在 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>