VUE3 学习笔记（10）：必须搞懂Axios 网络请求处理技术

BS开发中最重要的是交互，也就是前端与服务器的通信，最早用的是ajax，因为是同步的；目前最流行的是异步的通信：Axios

Axios基础

安装Axios

项目中运行终端 安装axios、querystring

cnpm install --save axios

或者

npm install --save axios

局部引用示例

全局引用示例

1.全局引用控制处处理  main.js 

import { createApp } from 'vue'
import App from './App.vue'
import axios from "axios";
const app=createApp(App)
app.config.globalProperties.$axios = axios;
app.mount('#app');

2.app.vue使用示例

简单实现示例

st1:测试准备四个接口

st2:先手动测试接口是否正常

st3:实现相关代码（注意axios已经设置为全局了）

<!--内容控制-->
<template>
  <p>{{name}}</p>
  <input v-model="companyId"/>公司ID
  <button @click="load">加载</button>

  <button @click="load2">加载带参数</button>
  <p v-for="item in userList">{{item.name}}</p>

  <input v-model="name"/>工号
  <button @click="load3">加载带参数字符串获取</button>
  <p>{{id}}</p>

</template>
<!--JS 控制-->
<script>

export default {
  data() {
    return {
      id: 0,
      name: "",
      age: 0,
      sex: "",
      companyId:0,
      userList: []
    };
  },
  //在渲染完成后执行 简写
  mounted() {
    //获取数据
    this.$axios.post("http://127.0.0.1:2000/attendance-config/test").then(response => {
      this.name = response.data.content.name;
    });
  },
  methods: {
    //get获取
    load() {
      this.$axios(
          {
            url: "http://127.0.0.1:2000/attendance-config/findById?id="+this.id,
            method: "get"
          }
      ).then(response => {this.name = response.data.content.name;});
      alert("ok")
    },
    //带个实体类参数获取
    load2() {
      this.$axios(
          {
            url: "http://127.0.0.1:2000/attendance-config/getPageByCondition",
            method: "post",
            data:{
              companyId:this.companyId
            }
          }
      ).then(response => {this.userList = response.data.content;});
    },
    load3() {
      this.$axios(
          {
            url: "http://127.0.0.1:2000/attendance-config/getUserByUserName",
            method: "post",
            data:{
              name:this.name
            }
          }
      ).then(response => {this.userList = response.data.content;});
      alert("第三次调用")
    }
  }
}
</script>

请求封装

        为了项目可维护性，我们需要把请求统一管理，这样的好处在于当接口发生变动时，只需要在统一的地方进行修改就行了，同样多个功能页调用同一个接口，只需要复用就可以，而不需要重复操作，还有一个好处在于可以做统一数据的拦截，比如服务器内部错误之类等等。

st1:第一步封装工具类（重构相关方法）

项目目录/src/utils/http.js

import axios from "axios";

const errorHandle = (status,msg)=>{
    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(msg)
    }
}

// 创建axios实例
const  instance = axios.create({
    //请求超时配置
    timeout:5000
})
//拦截

instance.interceptors.request.use(config=>{
    //请求拦截
    return config
},error=>{
    //请求失败
    return Promise.reject(error)
})

instance.interceptors.response.use(

    response=>{
    //响应成功
    return response.data
},error=>{
    //响应失败
        const {response}=error;
        //errorHandle(response.status,response.info)
    return errorHandle(response.status,response.info)
})
export default  instance;

st2:接口统一管理

项目目录/src/api/base.js

const base = {
    baseURL: 'http://localhost:2000',
    path:'/attendance-config/test'

}
export default base;

st3:请求统一入口

项目/src/api/index.js

import axios from "../utils/http";
import path from "../api/base";
const api = {
    //getUser
    getUser: (params) => {
        return axios.post(path.baseURL+path.path,params);
    },
}
export default api;

st4:第四步使用

app.vue

<template>

  <div id="app">
    <p>{{msg}}</p>

  </div>
</template>

<script>
import api from "./api/index";
export default {
  name: 'App',
  components: {
  },
  data() {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  mounted() {
    api.getUser().then(res => {
      this.msg=res.content.name
    })
  }
}
</script>

跨域解决方案

在实际的开发中，可能我们需要调用别人写的接口，这里对方的后端并未做跨域处理，那么需要在前端进行配置。

PS:跨域错误提示：Access-Control-Allow-Origin........

解决方式就是在项目中找到vue.config.js

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',//对应的地址
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
})

注意：

        1.调用时则在对应的请求地址时不直接写域名之后的地址就好。

        2.配置好vue.config.js后重新启动服务才生效。