【vue2】axios请求与axios拦截器的使用详解


// 添加请求拦截器
axios.interceptors.request.use(
  function (config) {
    // 在发送请求之前做些什么
    return config
  },
  function (error) {
    // 对请求错误做些什么
    return Promise.reject(error)
  }
)

// 添加响应拦截器
axios.interceptors.response.use(
  function (response) {
    // 2xx 范围内的状态码都会触发该函数。
    // 对响应数据做点什么
    return response
  },
  function (error) {
    // 超出 2xx 范围的状态码都会触发该函数。
    // 对响应错误做点什么
    return Promise.reject(error)
  }
)

我们将官网的这段代码获取下来了，兄弟姐妹们有没有发现官方甚至连注释都给我们写好了，很清晰明了的介绍了axios 拦截器的用法，可知：

axios是我们用于发送Ajax请求之前以及我们在发送请求之后会执行的一个回调函数

2.2axios拦截器使用

1.在项目中先下载下我们的axios

至此我们知道了axi ox的基本概念，那怎么在vue 项目中引用？使用 npm i axi os 或者这 yarn add axi os 将我们的axi os 下载下来（使用指南：npm的使用介绍）

2.项目中进行引入（与拦截器在同一个 js 文件）

import axios from 'axios'

3.设置基地址，并且导入 request

const request = axios.create({
  baseURL: 'http://ajax-api.itheima.net/api',
  timeout: 5000 // 超过5s请求停止
})


export default request

4.根据接口文档写axios请求

import request from '@/utils/request'
export function homeAddress (pname, cname) {
  return request({
    url: '/area',
    method: 'GET',
    params: {
      pname: pname,
      cname: cname
    }
  })
}

5.页面中进行调用

<template>
  <div class="div1">
    <button @click="getHomeAddress('江西省', '九江市')">点我获取地址</button>
  </div>
</template>

<script>
import { homeAddress } from './api/address'
export default {
  methods: {
    async getHomeAddress (pname, cname) {
      console.log(pname, cname)
      const res = await homeAddress(pname, cname)
      console.log('地址数据为：', res)
    }
  }
}
</script>

<style lang="less">
.div1 {
  background-color: teal;
  button {
    height: 50px;
    display: block;
    margin: 30px auto;
  }
}
</style>

6.点击按钮发送请求

7.配置axios拦截器

7.1请求拦截器

在发送请求之前会执行的一个回调，常用于将token 添加进请求头的Au th o rization中。

注意我们的axios实例是reque st因此从官网 cv下来我们需要将axios改为 reque st

// 添加请求拦截器
request.interceptors.request.use(
  function (config) {
    // 在发送请求之前做些什么
    console.log(config, 'config')
    console.log('嘿！我是在请求之前就执行的')
    return config // 发给服务器的信息
  },
  function (error) {
    // 对请求错误做些什么
    return Promise.reject(error)
  }
)

7.2响应拦截器

从服务器获取到了数据返回的时候先执行一个回调函数，常用于做状态码判断与脱壳处理

// 添加响应拦截器
request.interceptors.response.use(
  function (response) {
    // 2xx 范围内的状态码都会触发该函数。
    // 对响应数据做点什么
    console.log(response, 'response')
    console.log('嘿！我是在请求之后就执行的,response为我们请求相应的结果')

    return response.data.data
  },
  function (error) {
    // 超出 2xx 范围的状态码都会触发该函数。
    // 对响应错误做点什么
    return Promise.reject(error)
  }
)