关于axios

我就是我 2022-03-06 21:08 189阅读 0赞

## 简介 ##

axios是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中
    主要是用于向后台发起请求的，还有在请求中做更多是可控功能。

## 特点 ##

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

## 安装 ##

使用 npm:
    
    $ npm install axios
    使用 bower:
    
    $ bower install axios
    使用 cdn:
    
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

## 使用 ##

import axios from 'axios'
    import router from '../router/index'
    import Message from 'ant-design-vue/es/message'
    import Cookies from 'js-cookie'
    
    const service = axios.create({
      baseURL: '/api', // 统一请求路径前缀
      timeout: 15000// 请求超时时间
    })
    
    service.interceptors.request.use(config => {
      let sessionId = Cookies.get('X-SESSION-ID') || ''
      if (sessionId) {
        config.headers['X-SessionId'] = sessionId // 让每个请求携带自定义token 请根据实际情况自行修改
      }
      return config
    }, err => {
      Message.error('请求超时')
      return Promise.reject(err)
    })
    
    // http response 拦截器
    service.interceptors.response.use(response => {
      const data = response.data
      // 根据返回的code值来做不同的处理(和后端约定)
      switch (data.code) {
        case 401:
          // 未登录 清除已登录状态
          router.push('/login')
          return Promise.reject(new Error('401'))
        case 403:
          // 没有权限
          if (data.message !== null) {
            Message.error(data.message)
          } else {
            Message.error('未知错误')
          }
          return Promise.reject(new Error('未知错误'))
        case 500:
          // 错误
          if (data.message !== null) {
            Message.error(data.message)
          } else {
            Message.error('未知错误')
          }
          // return Promise.reject(new Error('未知错误'))
          return Promise.reject(data.message)
        default:
          return data
      }
    }, (err) => { // 这里是返回状态码不为200时候的错误处理
      Message.error(err.toString())
      return Promise.reject(err)
    })
    
    export default service

## API使用 ##

import request from '@/utils/request'
    
    // 所属区域
    export function getListByGroupStartAdminArea () {
      return request({
        url: '/area/getListByGroupStartAdminArea'
      })
    }
    
    // 直升机信息删除
    export function deleteCopter (data) {
      return request({
        url: `/copter/deleteCopter`,
        method: 'post',
        data
      })
    }

## 页面使用 ##

// 获取区域列表
        _getListByGroupStartAdminArea () {
          getListByGroupStartAdminArea().then(res => {
            this.options = res.payload
          })
        },

// 删除直升机信息
        handleDelete(record) {
          let copter = this
          this.$confirm({
            title: '直升机信息删除',
            content: '请确认是否将此直升机删除？',
            okText: '确定',
            cancelText: '取消',
            onOk() {
              deleteCopter({
                id: record
              }).then(res => {
                copter.$message.error('删除成功!')
                copter._getCopterList()
              })
            },
            onCancel() {}
          })
        },