关于axios

2024年1月1日 109次阅读 来源: 后端开发

简介

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() {}
      })
    },
    原文作者：后端开发
    原文地址: https://segmentfault.com/a/1190000018129057
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞