vue 中Axios封装

Axios是什么：

基于 Promise 的 HTTP 请求客户端，可同时在浏览器和 Node.js 中使用

Axios功能特性：

• 在浏览器中发送 XMLHttpRequests 请求
• 在 node.js 中发送 http请求
• 支持 Promise API
• 拦截请求和响应
• 转换请求和响应数据
• 取消请求
• 自动转换 JSON 数据
• 客户端支持保护安全免受 CSRF/XSRF（跨站请求伪造） 攻击

 Axios在vue中应用封装

这里算上页面调用的话分了三个页面

一个页面封装axios  (request.js)、一个存放api接口地址(api.js)，以及页面调用

//request.js

import axios from 'axios'  //引入Axios

import store from '@/store' //vux 不使用可忽略
import { getToken } from '@/utils/auth'  //cookie 不使用可忽略

//创建一个axios实例

const server = axios.create({
  
  baseUrl:process.env.VUE_APP_BASE_API，// 接口前缀  例如 http://127.0.0.1:8081
  timeout: 5000, // 响应时间，
  headers: { 'Content-Type': 'application/json', 'userType': 1 } // 设置公共请求头
})


//axios拦截 
// 请求参数拦截

service.interceptors.request.use(
  config => {
    //如果token存在设置头部请求参数
    if (store.getters.token) {
      config.headers['Authorization'] = getToken()
      config.headers['userType'] = 1
    }
    return config
  },
  error => {
    console.log(error) // for debug
    return Promise.reject(error)
  }
)

//响应拦截

service.interceptors.response.use(
  response => {
    
    //判断返回code码做出响应操作
    const res = response.data
    if (res.code !== 200) {
      Message({
        message: res.msg,
        type: 'error',
        duration: 3 * 1000
      })

      if (res.code === 400 || res.code === 500 || res.code === 50014) {
      }
      return Promise.reject(new Error(res.message || 'Error'))
    } else {
      return res
    }
  },
  error => {
    console.log('err' + error) // for debug
    Message({
      message: error.message,
      type: 'error',
      duration: 5 * 1000
    })
    return Promise.reject(error)
  }
)

 

api.js

import request from '@/utils/request'

// 查询正常用户列表
export function userList(data) {
  return request({
    url: '/admin/userList',
    method: 'get',
    params: data
  })
}

 

//页面调用

    getList(params) {
      userList(params).then(res => {
        this.tableConfigData.tableDataObj.bodyData = res.data
      })
    },

 

Axios 详情api可参考文档 

Axios中文网