chatGlM项目实训：前端与后端交互

方文307

已于 2024-05-31 12:39:43 修改

阅读量307

点赞数 2

文章标签：前端

于 2024-05-30 14:15:42 首次发布

本文链接：https://blog.csdn.net/weixin_64049063/article/details/139322738

版权

安装axios:

npm install axios

配置网络请求

import axios from "axios";
import * as querystring from "querystring";

const instance =axios.create({
    //网络请求的公共配置
    timeout:5000
})
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;
    }
}
//拦截器
//发送数据之前
instance.interceptors.request.use(
    config =>{
         if(config.method==="post"){
             config.data=querystring.stringify(config.data)
         }
        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;

前端逻辑（以登录为例）