axios的高阶用法

axios的高阶用法

axios是基于promise，用于浏览器和node.js是http客户端。

axios的作用是什么呢：axios主要是用于向后台发起请求的，还有在请求中做更多是可控功能。

在这里，我来分享一个axios在开发项目中比较实用的一个用法，以用户在使用app时与个人主页的交互为例

一、关于axios的一些介绍

比如，我们请求的是一个在线的接口，此时，我们会遇到跨域问题

我们可以通过前端代理服务器的形式，来解决跨域问题

devServer: {
    open: true, // 自动开启浏览器
    port: 8000, // 随便更改端口号
    proxy: { // 进行配置代理项，解决前端浏览器跨域的问题
      // 检索遇到/info
      '/info': {
        target: 'http://46.114.244.00:3000', // 目标请求的域名地址
        changeOrigin: true, // 是否改变
        pathRewrite: { // 重写地址
          '^/info': ''
        }
      }
    }
  }

这样，我们就可以这样使用接口

import axios from 'axios'
login(){
    axios.post("/info/api/user/loginin",{
        username:"admin",
        password:123
    }).then(res=>{
        console.log(res)
    })
}

此时，我们为了方便以后在项目中的使用，可以对axios进行一个封装，在utils文件夹下建立一个http.js文件来存放我们封装的axios

import axios from 'axios'
const instance = axios.create({
    baseURL: '/info',
})
export default instance

这时，我们就可以这样使用接口了

import instance from "@/utils/http"
login(){
    instance2.post("/api/user/loginin",{
        username:"admin",
        password:123
    }).then(res=>{
        console.log(res)
    })
}

我们可以在http.js中利用axios自带的一些api进行拦截器的封装的操作

• 在发生请求之前的拦截操作

  instance.interceptors.request.use(config => {
    return config
  })
  

• 在后端拿到数据之后，给我们进行响应之前进行一个拦截

  instance.interceptors.response.use(res => {
  	//假如我们后端拿到的数据中有一个res.data.flag === true
    if(res.data.flag){
      return res.data.data
    }else{
      return Promise.reject("出错了...")
    }
  })
  

二、axios实操

​ 在项目中，我们可以提前通过路由守卫来进行进入个人主页必须要登录成功后才能进入的操作，但是这还是有很大的漏洞的，所以我们需要在登录的时候，通过生成token令牌的方式，在进入个人主页时需要检查本地存储中是否存有token令牌，才可以允许是否可以进入个人主页界面。

• 用户点击登录，调用了login方法

  instance.post('/api/user/loginin',{
    username:'admin',
    password:'123'
  }).then(res => {
    //登录成功后，将token令牌放入本地存储
    localStorage.setItem('token',res.token)
    //跳转到个人主页
    //个人主页我们所使用的beforeRouterEnter进行是否含有token令牌，来进行是否next()
    this.$router.push('/center')
  }).catch(err => {
    console.log(err)
  })
  

• 后续考虑到，token会有失效的时候，这样，如果用户还是能正常进入个人主页的话会造成一些不安全的问题，所以我们可以在Center组件的created钩子函数中，进行添加一个判断token是否失效的请求头来解决这一问题

  created () {
    //进行接口请求，判断是token是否已经失效
    instance({
      method: 'post',
      url: '/api/user/isloginin',
      headers: {
        'X-Access-Token': localStorage.getItem("token")
      }
    }).then(res => {
      console.log('center-->', res)
    }).catch(err => {
      console.log('center-->', err)
      //证明token已经失效了，重新跳入登录界面
      this.$router.push('/login')
    })
  }
  

• 如果在很多地方都用到了携带token发送给后端，那么我们每次需要在上述写法中携带请求头，比较麻烦，所以我们可以在axios的高阶用法拦截器中进行一个配置，这样就可以在一个地方写上请求头，其他地方就不需要写了

  //因为我们是要提前写入一个请求头，所以可以在请求响应之前写入，也可以在这个时候携带一些后端需要的数据
  instance.interceptors.request.use(config => {
    if(localStorage.getItem('token')){
      config.headers['X-Access-Token'] = localStorage.getItem("token")
    }
    return 
  })
  

• 这时，我们只需要在钩子函数中这样写入，就可以省去很多事情

  created () {
    //进行接口请求，判断是token是否已经失效
    instance({
      method: 'post',
      url: '/api/user/isloginin',
    }).then(res => {
      console.log('center-->', res)
    }).catch(err => {
      console.log('center-->', err)
      //证明token已经失效了，重新跳入登录界面
      this.$router.push('/login')
    })
  }
  

以上就是axios的一个高阶用法——拦截器，若有出入，欢迎指出，立马改正