vue中封装axios请求

第一步：安装axios   npm install axios

第二步：新建utils/request.js文件

// 基于axios封装网络请求

import theAxios from 'axios'

// 配置axios

const axios = theAxios.create({

  // baseURL: 'https://lianghj.top:8888/api/private/v1/',

  baseURL: 'http://127.0.0.1:8888/api/private/v1/',

  timeout: 20000 // 请求超时（20秒）

})

// 添加请求拦截器

axios.interceptors.request.use(

  function (config) {

    // 在发送请求之前做些什么

    return config

  },

  function (error) {

    // 对请求错误做些什么

    return Promise.reject(error)

  }

)

// 添加响应拦截器

axios.interceptors.response.use(

  function (response) {

    // 2xx 范围内的状态码都会触发该函数。

    // 对响应数据做点什么

    return response

  },

  function (error) {

    // 超出 2xx 范围的状态码都会触发该函数。

    // 对响应错误做点什么

    return Promise.reject(error)

  }

)

// 默认对外暴露一个请求模板

export default ({ url, method = 'GEt', params = {}, data = {}, headers = {} }) => {

  return axios({

    url,

    method,

    data,

    params,

    headers

  })

}

第三步：新建utils/api.js文件，引入封装的axios，并且配置api请求信息

import request from '@/until/request'

例如：

// 登录

export const loginAPI = ({ username, password }) =>

  request({

    url: 'login',

    method: 'post',

    data: {

      username,

      password

    }

  })

第四步：在main.js入口文件导入封装的api接口文件,并且将所有的接口挂在到vue原型上

// 引入API里的所有接口函数

import * as API from '@/until/index'

// 挂在API接口函数挂载到vue原型上

new Vue({

  router,

  store,

  beforeCreate() {

    Vue.prototype.$API = API

  },

  render: (h) => h(App)

}).$mount('#app')

第五步：之后就可以在.vue文件中通过this.$API.接口函数进行使用

例如:

const result = await this.$API.loginAPI({ username, password })

          console.log(result)

          if (result.data.meta.status === 200) {

            this.$message({

              type: 'success',

              message: '登陆成功！'

            })