Vue3– Vue3 project integrates AXIOS (wrapped through Promise and resolved across domains through configuration proxies)

• The console installs AxiOS

npm install axios --save
Copy the code

• Create a file: SRC /axios/index.js. Encapsulate Axios with promises

import axios from 'axios';
axios.defaults.baseURL='/api'       // This path is the proxy path when configuring the proxy server

export default {
    get(url, data, responseType) { // url: interface; The path; Data: request parameters; ResponseType: indicates the corresponding data type. Default is JSON
        return new Promise((resolve, reject) = > {
            axios({
                method: 'get',
                url,
                data,
                headers: {
                    Accept: 'application/json'.'Content-Type': 'application/json; charset=utf-8'.withCredentials: true,},ResponseType :'blob' responseType:'blob'
                responseType: (responseType == null || responseType == ' ')?'json' : responseType
            }).then(response= > {
                if (response.status == 200) {
                    // Change as required
                    resolve(response)
                } else {
                    reject(response)
                }
            })
        })
    },

    post(url, data, responseType) { // url: interface; The path; Data: request parameters; ResponseType: indicates the corresponding data type. Default is JSON
        return new Promise((resolve, reject) = > {
            axios({
                method: 'post',
                url,
                data,
                headers: {
                    Accept: 'application/json'.'Content-Type': 'application/json; charset=utf-8'.withCredentials: true,},ResponseType :'blob' responseType:'blob'
                responseType: (responseType == null || responseType == ' ')?'json' : responseType
            }).then(response= > {
                if (response.status == 200) {
                    // Change as required
                    resolve(response)
                } else {
                    reject(response)
                }
            })
        })
    }
}
Copy the code

• Create the configuration file: project root /vue.config.js(the same as SRC). Configure proxy resolution across domains

module.exports = {      
    publicPath : '/'.// Basic path
    outputDir : 'dist'.// The file name of the packaged package
    assetsDir : 'static'.// CSS, js, img folder for storing static resources
    lintOnSave : false.// Whether to use 'eslint-loader' to check when saving. The default true
    runtimeCompiler : false.// Whether to use the Vue build with the runtime compiler. The default false
    productionSourceMap : false.// Production environment does not need source map to speed up production environment build. The default true
   
    devServer: {                / / webpack - dev - server configuration
        host : 'localhost'.port : 8080.// Configure the project running port
        proxy: {                // Configure proxy servers to resolve cross-domain issues
            '/api': {
                target: 'http://localhost:3000'.// Set the IP address of the background interface to be replaced
                changOrigin: true.// The configuration allows you to change Origin
                pathRewrite: {
                    '^/api': ' '}},}},}Copy the code

• Import the wrapped AXIos from the.main.js file and mount it globally

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

const app = createApp(App)
app.use(store)
app.use(router)
app.mount('#app')

// Import the wrapped AXIos and mount it to the Vue global properties
import Axios from './axios/index.js'
app.config.globalProperties.$axios = Axios
Copy the code

• Component uses AXIOS for network requests

<template>
  <div>
    <p></p>
  </div>
</template>
<script>
import { defineComponent, getCurrentInstance, onMounted } from 'vue'

export default defineComponent({
  name: ' '.setup(){
    const { proxy } = getCurrentInstance() // Get the context object
    onMounted(() = > {
      proxy.$axios.post('/playlist/hot', {}) // Network request
        .then(result= > {
          console.log(result)
        }).catch(() = > { / * * /})})return{}}})</script>
Copy the code