Vue3，Axios网络请求

在日常应用中，一个项目中的网络请求会很多很多，此时一般采取的方案是将网络请求封装起来！

使用npm  安装

$ npm install --save axios

使用 bower:

$ bower install axios

咱们废话不多说直奔主题 =>

打开main.js配置以下

// 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')

配置完成以后我们就可以直接在demo中使用了

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

-------------------分割线-----以下部分跟以上部分不冲突-----------------

在src目录下创建一个utils目录，并且在utils下创建request.js文件 

request.js内容如下

//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;

再建个api文件夹,如下分别是index.js\path.js

path.js主要存放api路径 列：

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

export default base;

index.js就是最后一道工序，列：

//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

 都配置完成后  就可以直接在vue中使用啦 

如何使用:

//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>