A, axios

1, install,

CDN way

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
Copy the code

NPM way

npm install axios --save
Copy the code

Yarn way

yarn add axios --save
Copy the code

Install with vue-AXIos plug-in

Vue-axios is a light wrapper that integrates AXIOS into vue.js and cannot be used on its own

npm install axios vue-axios
Copy the code

Use in main.js

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

const app = createApp(App)

app.use(store)
app.use(router)
// VueAxios should be added first; otherwise, Maximum call stack size exceeded is reported
app.use(VueAxios, axios)
app.mount('#app')

Copy the code

2. Basic use

The configuration encapsulates config-util.js

export default {
  baseUrl: {
    // Development environment
    dev: 'xxx'.// Production environment
    prod: 'xxx'}}Copy the code

Request to encapsulate http-util.js

Interceptors on demand

import axios from 'axios' / / introduce axios
import config from '@/api/utils/config-util.js' // Import the configuration file

const instance = axios.create({
  baseURL: config.baseUrl.dev,
  timeout: 60000
})

// Request interceptor
instance.interceptors.request.use(function (config) {
  console.log('Before sending a request', config)
  return config
}, function (error) {
  console.log('Request error', error)
  return Promise.reject(error)
})

// Response interceptor
instance.interceptors.response.use(function (response) {
  console.log('Response data obtained', response)
  return response
}, function (error) {
  console.log('Response error', error)
  return Promise.reject(error)
})

/ / get request
export function get (url, data = {}) {
  return new Promise((resolve, reject) = > {
    instance
      .get(url, {
        params: data
      })
      .then((response) = > {
        resolve(response)
      })
      .catch((err) = > {
        reject(err)
      })
  })
}

/ / post request
export function post (url, data = {}) {
  return new Promise((resolve, reject) = > {
    instance.post(url, data).then(
      (response) = > {
        resolve(response.data)
      },
      (err) = > {
        reject(err)
      }
    )
  })
}

Copy the code

Returns data encapsulated in return-util.js

It’s personal, not professional

/ / tools
// Return the request result
export const returnMsg = async promise => {
  try {
    const res = await promise
    if (res.status === 200) {
      return res.data
    } else {
      return 'no 200 ! '}}catch (e) {
    console.log(e.name + '= = = =' + e.message)
    if (e.message.indexOf('404')! = = -1) {
      return '404'
    }
    return 'error'}}Copy the code

Test the API

import { get, post } from '@/api/utils/http-util.js'
import { returnMsg } from '@/api/utils/return-util.js'

export const getHomeData = async data => await returnMsg(get('hello', data))

export const getHomeData02 = data= > post('hello', data)

Copy the code

Using the demonstration

<template>
  <div>The main page<h1>{{ str }}</h1>
  </div>
</template>

<script>

import { getHomeData } from '@/api/test-api.js'
import { ref, onMounted } from 'vue'

export default {
  setup () {
    const str = ref('Default value')
    onMounted(async() = > {const data = await getHomeData(null)
      str.value = data
    })
    return { str }
  }
}
</script>

<style>

</style>

Copy the code