axios使用方法

梦里梦外; 2022-05-10 13:16 214阅读 0赞

Axios

--------------------

### 简介 ###

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

使用说明：https://www.kancloud.cn/yunye/axios/234845

Axios在项目中的使用：

### 安装 ###

使用 npm:

npm install axios

使用 cdn:

### 基本用法 ###

下面介绍axios在本项目中的使用方式

├─src
    │ ├─api
    │ │ ├─index.js
    │ ├─utils
    │ │ ├─index.js
    │ │ ├─request.js

utils文件夹下request.js

import axios from 'axios' // 引入
    const service = axios.create({
        baseURL: 'http://domain.name.com/project', // 后台接口域名
        timeout: 5000
    })

请求拦截，设置每个请求头携带headers用于登录验证及登录状态判断

service.interceptors.request.use(
      config => {
        if (store.getters.token) {
          config.headers['Authorization'] = getToken()
        }
        config.headers['Accept'] = '*, *'
        return config
      },
      error => {
        Promise.reject(error)
      }
    )

响应拦截，判断响应数据状态码，给出对应提示信息

全局的响应拦截可以避免每个接口中做判断，提高代码复用性

service.interceptors.response.use(response => {
      let data = response.data
      // 处理接口数据格式不正确
      if (response.config.direct) {
        return data
      }
      if (response.data.code === 401) {
        MessageBox.confirm('你已被登出，可以取消继续留在该页面，或者重新登录', '确定登出', {
          confirmButtonText: '重新登录',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
            store.dispatch('FedLogOut').then(() => {
            location.reload()
          })
        })
      }
      // 判断错误信息
      if (response.data.code && response.data.code !== 200 && response.data.code !== 1) {
        let message = data.msg
        let str = '网络出现波动，请稍后重试'
        if (typeof message === 'string') {
          str = message
        }
        Message.closeAll()
        Message({
          message: str,
          type: 'warning',
          duration: 1200
        })
      }
      return data
    }, error => {
      Message({
        message: error.message,
        type: 'error',
        duration: 1000
      })
      return Promise.reject(error)
    })
    export default service

全局http请求封装`get、post、put、delete`方法 (utils文件夹下`http.js`文件)

import axios from './request'
    const online = {
      get (url, data) {
        return axios.get(url, {params: data})
      },
      post (url, data) {
        return axios.post(url, data)
      },
      put (url, data) {
        return axios.put(url, data)
      },
      delete (url, data) {
        return axios.delete(url, {params: data})
      }
    }
    export default online

接口函数封装 (src/api文件夹下`index.js`文件)

`qs`用于部分`post`接口请求参数封装

import http from '@/utils/http'
    import qs from 'qs'
    
    export function systemLogin (query) {
      return http.post('/login', query)
    }
    
    export function deleteSowingmapByStatus (query) {
      return http.put('/sowingmap/deleteSowingmapByStatus', qs.stringify(query))
    }

以获取系统日志为例 `systemLog.vue` 文件

import { querysystemlog } from '@/api/index'
    export default {
      data () {
        return {
          total: 0,
          pageNum: 1,
          pageSize: 10,
          tableData: []
        }
      },
      mounted () {
        this.getData()
      },
      methods: {
        getData () {
          querysystemlog({
            pageNum: this.pageNum,
            pageSize: this.pageSize
        }).then(res => {
          this.tableData = res.data.result
          this.total = res.data.total
        })
       }
      }
    }

tips：推荐使用箭头函数，使代码更加简洁