vue封装axios

1.安装axios插件

npm install axios

2.新建一个文件,导入axios

// 引入axios
import axios from 'axios'
// 引入elementUI的加载动画
import { Loading } from 'element-ui'

// 创建axios时给axios配置基本路径
const service = axios.create({
  baseURL: 'http://127.0.0.1/'
})

// 声明一个变量来控制加载动画
let load

// 请求拦截器,请求之前要做什么
service.interceptors.request.use((config) => {
  load = Loading.service({
    text: '加载中'
  })

  const token = 'testToken'
// 往请求头里面的添加token
  config.headers.token = token
// 一定要return出去才能获取到请求的参数
  return config    
})

function request (options) {
  return new Promise((resolve, reject) => {
    service({
      ...options
    })
      .then((res) => {
        resolve(res)
      })
      .catch((err) => {
        reject(err)
      })
  })
}

service.interceptors.response.use((result) => {
  load.close()
  return result.data  // 把需要放回的结果return出去
})

export default request

3.使用时先引入这个文件,然后调用里面的方法传递参数进去

import request from './request'

// post请求使用data , get请求使用params
export const getData = (option) => request({
    url: '',
    data: option
})

4.在另一个文件中调用getData方法

import { getData } from '文件路径'

async getResult(option){
    const res = await getData(option)
    // res 就是结果返回的结果
    console.log(res)
}