axios的使用

1.1要使用axios下载引用

npm install axios -S

引入：import axios from 'axios'

1.2 使用

axios.get()

axios.post();

axios({})：

 也可以这样写：默认是get方法：

 一、axios是基于promiss对ajax的一种封装

首先，需要在src文件夹下创建一个文件夹，一般取名为utils(是应用程序的简写，小方法）

在下面创建一个文件，取名为request（请求）

 定义好了requst函数，如何去使用呢。把request导入组件就可以用了

 这样我们封装的request函数就可以使用了，一般项目中我们都会创建一个文件夹用来放所有的接口，起名为api,在文件夹中创建不同页面的文件，写入不同的接口，首先要引入request

请求拦截器和响应拦截器主要应用场景：请求网络接口

• 请求拦截器：发送请求的时候，携带一些信息
• 响应拦截器：接收到数据的时候，进行数据过滤、对状态码判断，进行对应的操作

一、请求拦截器

• 请求拦截器的作用是在请求发送前进行一些操作，例如在每个请求体里加上token，统一做了处理如果以后要改也非常容易。

  // 请求超时时间
  axios.defaults.timeout = 120000
  
  // 添加请求拦截器
  axios.interceptors.request.use(
    config => {
      // 在发送请求之前做些什么
      // 判断是否存在token，如果存在将每个页面header都添加token
      if (window.sessionStorage.getItem('DT')) {
        // 请求头配置全局token
        config.headers.DT = window.sessionStorage.getItem('DT')
      }
      return config
    },
    err => {
      // 对请求错误做些什么
      Vue.prototype.$message.error('请求超时')
      return Promise.reject(err)
    }
  )

  二、响应拦截器

• 响应拦截器的作用是在接收到响应后进行一些操作
  • 例如在服务器返回登录状态失效，需要重新登录的时候，跳转到登录页。
  • 对接收到的数据进行处理筛选，只留下需要的数据
• 响应拦截器也是一样如此，就是在请求结果返回后，先不直接导出，而是先对响应码等等进行处理，处理好后再导出给页面，如果将这个对响应码的处理过程抽出来，就成了所谓的响应拦截器。

  // 响应拦截器
  axios.interceptors.response.use(
    response => {
      // res是响应的结果
      switch (response.data.code) {
        case 401:
          // 登录失效
          // 响应成功的拦截
          console.log('响应拦截器：')
          // console.log(response.data)
          Vue.prototype.$message.error(response.data.message)
          sessionStorage.removeItem('DT')
          router.push('/login')
          break
        case 404:
          if (response.data.message !== null) {
            Vue.prototype.$message.error(response.data.message)
          } else {
            Vue.prototype.$message.error('未知错误')
          }
          break
        case 500:
          // 错误
          if (response.data.message !== null) {
            Vue.prototype.$message.error(response.data.message)
          } else {
            Vue.prototype.$message.error('未知错误')
          }
          break
        default:
          return response
      }
      return response
    },
    err => {
      if (err.response.data.message) {
        Vue.prototype.$message.error(err.response.data.message)
        return Promise.reject(err.response.data.message) // 返回接口返回的错误信息
      } else {
        // 返回状态码不为200时候的错误处理
        Vue.prototype.$message.error(err.toString())
        return Promise.resolve(err)
      }
    }
  )

为什么使用axios:

 1、如果用原生的话，需要自己对fetch进行封装

2、有时候发生网络请求的时候可能会做一些额外的操作，比如说响应拦截、请求拦截。原生是不具备拦截功能的。

3、目前js有两个运行环境的，一个是浏览器一个是node。比如说使用原生的fetch发送网络请求的，在浏览器可以正常使用，但是如果要在node中使用，就无法使用了。