认识Axios

axios中文网

一. 为什么会诞生Axios

  1. 最初浏览器页面向服务器请求数据时,返回的是整个页面,整个页面都会刷新
  2. ajax的出现,它可以在页面无刷新的情况下请求数据
  3. 原生的XMLHttpRequest,jQuery封装的ajax,以及axios都可以实现异步的网络请求
  4. axios(相比于原生的XMLHttpRequest对象)简单易用,(相比于jQuery)axios包尺寸小且提供了易于扩展的接口,是专注于网络请求的库
  5. axios本质上是XMLHttpRequest的封装

二. Axios是什么

  • axios是一个基于Promise的网络请求库,可以用于浏览器和node.js
  • 简单来说就是可以发送get、post等请求
  • vue、react等框架的出现,促使axios轻量级库的出现。因为vue、react等不需要操作dom,所以不需要引入jquery.js了

三. axios与ajax的区别

理论区别:

  • axios是通过Promise实现对ajax的封装,就像jQuery对ajax的封装一样。ajax实现了页面局部的刷新,axios实现了对ajax的封装
  • axios是ajax,ajax不止axios,即axios是ajax的衍生

逻辑区别:

  • ajax 本身是一个针对MVC的编程
  • axios符合现在前端MVVM的浪潮

axios的特点:

  • 从浏览器创建XMLHttpRequest
  • 从node.js创建http请求
  • 支持Promise API
  • 拦截请求和响应
  • 转换请求和响应数据
  • 取消请求
  • 自动转换JSON数据
  • 客户端支持防御XSRF

四. axios请求的五种方式(get,post,put,patch,delete)

注:使用axios记得先安装它的依赖,并导入,此处省略

  • get:获取数据
  • post:提交数据(表单提交+文件上传)
  • put:更新数据(所有数据推送到后端)
  • patch:更新数据(只将更新的数据推送到后端)
  • delete:删除数据
// params 是将与请求一起发送的url参数,对应后台中的query
// data 是作为请求主体被发送的数据,对应后台中的body
axios.request(config)
axios.get(url[, config])  // 只支持 params 传参
axios.delete(url[, config])  // 只支持 params传参
axios.head(url[, config]) // 只支持 params传参
axios.post(url[, data[, config]]) // 同时支持  data 和 params
axios.put(url[, data[, config]]) // 同时支持  data 和 params
axios.patch(url[, data[, config]]) // 同时支持  data 和 params

使用方法:

1. get方法

2. post方法

3. put方法

4. patch方法

5. delete方法

五. axios拦截器的介绍

       1. axios拦截器的原理:

         网络请求 ——> axios ——> 请求拦截器 ——> 服务器

                                            ——> 响应拦截器 ——> 服务器

        2. 请求拦截器:主要处理token的统一注入问题

import axios from 'axios';
const axiosRequest = axios.create(); // 创建axios实例

axiosRequest.interceptors.request.use(config => {
        // 有token修改token,没有token跳转登录
        if (store.getters.getToken !== '') {
            // 让每个请求携带token-- ['X-Token']为自定义key 请根据实际情况自行修改
            if(!config.headers['Authorization']){
              config.headers['Authorization'] = store.getters.getToken; // getToken();
            }
        } else {
            if (config.url.charAt('/login?') == -1) {
              window.location = '/login';
            }
        }                
        return config
    }, error => {
    return Promise.reject(error)
})

        3. 响应拦截器:主要处理返回的数据异常和数据结构的问题

import axios from 'axios';
const axiosRequest = axios.create(); // 创建axios实例

axiosRequest.interceptors.response.use(response => {
    if (response && response.data && response.data.code == '401') {
        store.dispatch("setToken", "");
        if (messagetimeout) {
          clearTimeout(messagetimeout)
          messagetimeout = null
        }
        messagetimeout = setTimeout(function () {
          this.$message({
            type: 'error',
            message: '认证失效,请重新登录!',
            duration: 1000,
            onClose: function () {}
          })
          setTimeout(() => {
            let routeData = router.resolve({
              path: '/login',
            })
            location.href= routeData.href;
          }, 500)
        }, 500)
        return Promise.reject(response.data)
      }
    if (response && response.data && response.data.code == '20007') {                        
        this.$message({
          type: 'error',
          message: '此用户已在其他地方登陆! ',
          duration: 1000,
          onClose: function () {
            window.location = 'login';
          }
        })
        return Promise.reject(response.data)
      }
      if (response && response.data && !response.data.success && !isMobile) {
        if (typeof response.data == 'object' && !(response.data instanceof Blob)) {
          this.$message({
            type: 'error',
            message: response.data.message
          })
        }
      }
},async error => {
    // error 有response对象 config
    if (error.response && error.response.data && error.response.data.code === 10002) {
        // 后端告诉前端token超时了
        await store.dispatch('user/lgout') // 调用登出action
        router.push('/login') // 跳到登录页
    }
    this.$message.error(error.message) // 提示错误
    return Promise.reject(error) // 传入一个错误的对象  就认为promise执行链 进入了catch  
})

六. axios的封装

你可能感兴趣的:(#,L4:Vue,axios,vue,请求拦截)