vue3.0 封装axios

第一步：

项目下新建文件夹api和user.js用来存储调取的接口，新建文件夹utils和request.js用来封装axios

 第二步：

request.js写入如下代码

import axios from 'axios'

// 创建axios实例
const instance = axios.create({
  baseURL: 'http://192.168.2.76:8102/eduservice/ucenter-member/', // api的base_url
  timeout: 15000,                 // 请求超时时间
  headers: {
    'key': 'value'
  }
})

// 拦截请求
instance.interceptors.request.use(config => {
  // 发送请求之前做些什么
  return config
}, error => {
//  请求错误做些什么
  return Promise.reject(error)
})

// 拦截响应
instance.interceptors.response.use(res => {
  // 对响应数据做些什么
  return res
}, error => {
// 对响应错误做些什么
  return Promise.reject(error)
})

export default instance

user.js写入如下代码

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

export function login (params) {
  return request({
    url: '/login',
    method: 'post',
    data: params
  })
}
export function reg (params) {
  return request({
    url: '/reg',
    method: 'post',
    data: params
  })
}

第三步：

以login.vue为列，将js引入页面

 import {login,reg} from "@/api/user.js";

使用 loginBtn为登录按钮的点击事件

    loginBtn(){
        login({mobile:this.mobileVal,password:this.passwordVal}).then(result=>{

        })
      }

 如此即可