axios基本使用及封装

axios配置

• 请求地址：url: '/user'
• 请求类型：method: 'get'
• 请根路径：baseURL: 'http://www.mt.com/api'
• 请求前的数据处理：transformRequest:[function(data){}]
• 请求后的数据处理： transformResponse: [function(data){}]
• 自定义的请求头：headers:{'x-Requested-With':'XMLHttpRequest'}
• URL查询对象：params:{ id: 12 },
• 查询对象序列化函数：paramsSerializer: function(params){ }
• request body：data: { key: 'aa'}
• 超时设置：timeout: 1000,
• 跨域是否带Token：withCredentials: false
• 自定义请求处理：adapter: function(resolve, reject, config){}
• 身份验证信息：auth: { uname: '', pwd: '12'}
• 响应的数据格式json / blob /document /arraybuffer / text / stream：responseType: 'json'

axios封装

在项目中，我们通常会对请求进行二次封装，在项目中src/utils文件下新建request.js文件存放封装的请求，导入第三方请求库。那么为什么会二次封装请求呢？因为例如axios请求属于第三方库，如果后期作者不再维护axios库的时候，我们只需要修改request.js文件依赖的第三方框架部分，这样不会影响项目中其他需要发送请求的代码。

src/utils/request.js

import axios from 'axios'
import { useMsgbox, Message } from 'element3'
import store from '@/store'
import { getToken } from '@/utils/auth'

const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
  timeout: 5000, // request timeout
})

service.interceptors.request.use(
  config => {
    if (store.getters.token) {
      config.headers['X-Token'] = getToken()
    }
    return config
  },
  error => {
    console.log(error) // for debug
    return Promise.reject(error)
  },
)

service.interceptors.response.use(
  response => {
    const res = response.data
    if (res.code !== 20000) {
      console.log('接口信息报错',res.message)
      return Promise.reject(new Error(res.message || 'Error'))
    } else {
      return res
    }
  },
  error => {
    console.log('接口信息报错' + error) 
    return Promise.reject(error)
  },
)

export default service

axios使用

src/api/login/index.js

import service from '../../utils/request.js'


export function axiosInstance1(params){
  return service ({
   url:'/home/multidata',
    method: 'get',
    params

   })
    
}