Js开发-Vue 技术-通信模拟Plugin-axios

① 安装配置axios

 1. 安装  npm install axios 

 2. 创建axios/index.js 文件

import axios from 'axios'
import httpUser from './httpUser'

// axiosデファクト値
axios.defaults.timeout = 5000 // 5000でタイムアウト設定
axios.defaults.headers.post['Content-Type'] = 'application/jsoncharset=UTF-8'

// axios初期化
const instance = axios.create()
instance.defaults.headers.post['Content-Type'] = 'application/jsoncharset=UTF-8'

axios.interceptors.request.use = instance.interceptors.request.use

export const instanceHttp = instance

export default {
  user: httpUser
}

 3. 创建axios/httpUser.js 文件

import { instanceHttp } from '../axios'
export default {
  // ユーザーログイン
  UserLogin (data) {
    return instanceHttp.get('/api/user/login', data)
  }
}

 4. main.js 中 axios导入

import { createApp } from 'vue'
import App from './App.vue'

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import router from './router/index'

import api from './axios/index.js'

const app = createApp(App)
app.config.globalProperties.$api = api
app.use(ElementPlus)
app.use(router)
app.mount('#app')

 5. Vue 画面调用

submitForm() {
  const opt = this.ruleLogin;
  console.log(opt)
  this.$api.user.UserLogin().then(({ data }) => {
    const code = data.code;
    if (code === 200) {
      console.log('res success' )
    } else {
      console.log('res fail')
    }
  })
}