关于axios

简介



axios是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中

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

特点



从浏览器中创建 XMLHttpRequests

从 node.js 创建 http 请求

支持 Promise API

拦截请求和响应

转换请求数据和响应数据

取消请求

自动转换 JSON 数据

客户端支持防御 XSRF

安装



使用 npm:

$ npm install axios

使用 bower:

$ bower install axios

使用 cdn:

&lt;script src="https://unpkg.com/axios/dist/axios.min.js"&gt;&lt;/script&gt;

使用



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 =&gt; {

  let sessionId = Cookies.get('X-SESSION-ID') || ''

  if (sessionId) {

    config.headers['X-SessionId'] = sessionId // 让每个请求携带自定义token 请根据实际情况自行修改

  }

  return config

}, err =&gt; {

  Message.error('请求超时')

  return Promise.reject(err)

})

// http response 拦截器

service.interceptors.response.use(response =&gt; {

  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) =&gt; { // 这里是返回状态码不为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 =&gt; {

        this.options = res.payload

      })

    },



// 删除直升机信息

    handleDelete(record) {

      let copter = this

      this.$confirm({

        title: '直升机信息删除',

        content: '请确认是否将此直升机删除？',

        okText: '确定',

        cancelText: '取消',

        onOk() {

          deleteCopter({

            id: record

          }).then(res =&gt; {

            copter.$message.error('删除成功!')

            copter._getCopterList()

          })

        },

        onCancel() {}

      })

    },

来源：https://segmentfault.com/a/1190000018129057

巴特西

关于axios

简介

特点

安装

使用

API使用

页面使用

最新文章

热门文章