axios用法/请求方式

1.安装axios

npm install axios

2.封装axios

import axios from 'axios'

// 1.通过当前的运行命令判断出当前的运行环境，切换请求地址
// 开发环境 + 测试环境 + 生产环境
const isDev = process.env.NODE_ENV === 'development'
// isDev  ---  true   ----  开发环境  ----  npm run serve
// isDev  ---- false   ----  生产环境  ----  npm run build

// 如果是开发环境，服务器可能是本地的，也可能是服务器上的
const baseUrl = isDev ? 'xxxxxxxxxxxx' : 'xxxxxxxxxxxx'

// 2.自定义axios,添加axios拦截器
const instance = axios.create({
  baseURL: baseUrl
})

instance.defaults.timeout = 6000

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
  // 在发送请求之前做些什么
  const token = localStorage.getItem('token')
  config.headers.common.token = token
  return config
}, function (error) {
  // 对请求错误做些什么
  return Promise.reject(error)
})

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
  // 对响应数据做点什么
  return response
}, function (error) {
  // 对响应错误做点什么
  return Promise.reject(error)
})

export default instance

3.VUE异步请求传入参数方式

import axios from '封装axios路径'

//方式（推荐）
 GET      axios.get(请求路径，{params: 数据对象})  
          axios.get(请求路径，{params: {uname:'aaa', pwd:'bbb'}})          	 
 POST     axios.post(请求路径，数据对象)   
 PUT      axios.put(请求路径，数据对象)   
 DELETE   axios.delete(`请求路径/${id}`)  

//补充方式
//post
export const 自定义名称 = (params) => {
   // return request.post('xxxxx', params )
   return request({
     url: 'xxxxx',
     method: 'POST',
     data: params  //这种方式：post请求时 键为data 不能为其他
   })
 }
//get
export const 自定义名称 = (params) => {
  // return request.get('xxxxx', { params: params })
  return request({
    url: 'xxxxx',
    method: 'GET',
    params: params
  })
}
//等等