Vue3, solicitud de red Axios

En las aplicaciones diarias, habrá muchas solicitudes de red en un proyecto. En este momento, la solución general es encapsular las solicitudes de red.

Instalar usando npm 

$ npm instalar --guardar axios

Utilice la glorieta:

$ bower instalar axios

Dejemos de lado las tonterías y vayamos directo al grano =>

Abra main.js y configure lo siguiente

// main,js
import { createApp } from 'vue'
import App from './App.vue'
import axios from 'axios'//引入axios

const app = createApp(App)
//将axios挂在到全局
app.config.globalProperties.$axios = axios

app.mount('#app')

Una vez completada la configuración, podemos usarla directamente en la demostración.

   this.$axios.post('http://www.***.com',{data:value}).then(res => {
      console.log(res.data)
    })

------------------Línea de separación-----Las siguientes partes no entran en conflicto con la parte anterior--------------- --

Cree un directorio de utilidades en el directorio src y cree el archivo request.js en utilidades 

El contenido de request.js es el siguiente

//request.js
import axios from "axios";
import querystring from "querystring";

//status:状态码的信息。 info:具体错误信息
const errorHandle = (status,info) => {
    switch(status){
        case 400:
            console.log('语义有误');
            break;
        case 401:
            console.log('服务器认证失败');
            break;
        case 403:
            console.log('服务器拒绝访问');
            break;
        case 404:
            console.log('地址错误');
            break;
        case 500:
            console.log('服务器遇到意外');
            break;
        case 502:
            console.log('服务器无响应');
            break;
        default:
            console.log(info)
            break;
    }
}

const instance = axios.create({
    //网络请求的公共配置
    timeout:5000
})

//发送数据之前
instance.interceptors.request.use(
    config =>{
        if (config.method === "post"){
            config.data = querystring.stringify(config.data)
        }
        //config:包含着网络请求的所有信息
        return config;
    },
    error =>{
        return Promise.reject(error)
    }

)
//获取数据之前
instance.interceptors.response.use(
    response => {
        return response.status === 200? Promise.resolve(response) : Promise.reject(response)
    },
    error => {
        const { response } = error;
        //错误的处理才是最关键的
        errorHandle(response.status,response.info)
    }
)

export default instance;

Cree otra carpeta api, de la siguiente manera: index.js\path.js

path.js almacena principalmente columnas de ruta de API:

//path.js
const base = {
    //主要路径
    baseUrl:'http://www.***.com',
    //成品路径
    chengUrl:'/api/**.java'   
}

export default base;

index.js es el último paso, listado:

//index.js
import axios from "../utils/request";
import path from "./path.js";

const api = {
    //成品详情地址
    getChengpin(){
        return axios.get(path.baseUrl + path.chengUrl)
    }
}
export default api

 Una vez completadas todas las configuraciones, puede usarlas directamente en vue. 

cómo utilizar:

//demo.vue
<template>
  <div class="hello">
    <h1>Axios网络请求封装</h1>
  </div>
</template>

<script>
name="demo.vue",
import api from "../api/index";
export default {
  name: 'HelloWorld',
  mounted(){
    api.getChengpin().then(res=>{
      console.log(res.data)
    })
  }
}

</script>