一、配置 Axios 异步请求

1、安装 axios

cnpm install axios

2、封装axios与http请求

（1）封装axios： utils/MyAxios.js ，定义axios请求，设置请求拦截器和相应拦截器
（2）封装http请求： utils/MyRequest.js， 封装get / post / put / delete 等http请求

（1）在 src 中新建 utils 目录，然后新建 MyAxios.js 文件

import axios from 'axios';

// 定义api的根路径
const myBaseURL = 'http://localhost:8081/api/v1/';

const service = axios.create({
    baseURL: myBaseURL,
    timeout: 5000,
    headers: {
        "Content-Type": "application/json;charset=UTF-8",
    }
})

// 请求拦截器
service.interceptors.request.use(config => {
    // 判断是否有token，若有则加入请求头中
    const getToken = localStorage.getItem("HcToken");
    if (getToken){
        config.headers['token'] = getToken
    }
    return config;
}, error => {
    console.log("MyAxios Request Error ==========");
    return Promise.reject(error);
})

// 响应拦截器
service.interceptors.response.use(res => {
    if (res.data.code !== 1000){
        alert(res.data.msg)
    }
    return res.data;
}, error => {
    console.log("MyAxios Response Error ==========");
    return Promise.reject(error)
})

export default service

（2）在 utils 目录中新建 MyRequest.js 文件

import myAxios from '@/utils/MyAxios';

const myRequest = {
    get(url, params){
        const config= {
            method: 'get',
            url: url
        }
        if(params) config.params = params;
        return myAxios(config);
    },
    post(url, params){
        const config= {
            method: 'post',
            url: url
        }
        if(params) config.params = params;
        return myAxios(config);
    },
    put(url, params){
        const config= {
            method: 'put',
            url: url
        }
        if(params) config.params = params;
        return myAxios(config);
    },
    delete(url, params){
        const config= {
            method: 'delete',
            url: url
        }
        if(params) config.params = params;
        return myAxios(config);
    }
}

export default myRequest

3、封装业务请求

（1）在 src 中新建 network 目录，然后新建 reqNews.js 文件

import myRequest from '@/utils/MyRequest';

export function newsAll() {
    return myRequest.get("uniapp/news/all");
}

export function newsById(id) {
    return myRequest.get(`uniapp/news/detail?id=${id}`);
}

（2）在network 目录中新建 reqAuth.js 文件

import myRequest from '@/utils/MyRequest';
import MD5 from "js-md5"

export function doLogin(username, password) {
    return myRequest.post(
        "auth/login",
        {
            "username": username,
            "password": MD5(password)
        }
    )
}

4、页面中调用网络请求

（1）在测试页面 TestView.vue 中调用网路请求

<template>
    <h1>TestView</h1>
</template>

<script setup>
  import { onMounted } from "vue";
  import { newsAll, newsById } from "@/network/reqNews";

  onMounted( ()=>{
    newsAll().then(res=>{
      console.log("获取全部新闻");
      console.log(res);
    })

    newsById(1).then(res=>{
      console.log("获取ID为1的新闻");
      console.log(res)
    })
  })
</script>

请求新闻接口返回

（2）在登录页面调用登录请求

<script setup>
  // ……略……

  //登录按钮点击事件
  function onBtnLoginClicked(){
    if(username.value == "" || username.value == null){
      ShowError("账号不能为空");
      return;
    }
    if(password.value == "" || password.value == null){
      ShowError("密码不能为空");
      return;
    }

    doLogin( username.value, password.value ).then(res=>{
      console.log(res)
      if (res.code == "1000"){
        localStorage.setItem("HcToken", res.data.token);
        localStorage.setItem("HcUserId", res.data.id);
        localStorage.setItem("HcUserName", res.data.username);
        router.push("/index")
      }
    })
  }

  // ……略……

</script>

登录请求参数

调用登录请求返回