axios使用方法

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：推荐使用箭头函数，使代码更加简洁