vue（axios）请求接口

SporadicLife

已于 2023-06-06 18:18:41 修改

阅读量729

点赞数 1

文章标签： vue.js javascript 前端

于 2023-05-10 18:21:33 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_45168276/article/details/130607094

版权

本文介绍了如何使用npm或yarn安装Axios库，并展示了如何导入和使用它进行GET和POST请求。接着，文章讲解了如何封装Axios，包括设置不同环境的API基础路径，并添加请求和响应拦截器处理错误。最后，演示了如何使用封装后的POST请求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

安装

可以使用npm或yarn来安装axios：

npm install axios --save
yarn add axios

导包(后端俗语)

import axios from 'axios';

未封装get请求

// 发送 GET 请求
axios.get('/api/user', {
  params: {
    id: 123
  }
}).then(response => {
  console.log(response);
}).catch(error => {
  console.log(error);
});

未封装post请求

// 发送 POST 请求
axios.post('/api/user', {
  name: '张三',
  age: 18
}).then(response => {
  console.log(response);
}).catch(error => {
  console.log(error);
});

封装axios

一般企业都会都多个环境，创建文件夹config/index.js

/**
 * 环境配置文件
 * 一般在企业级项目里面有三个环境
 * 开发环境
 * 测试环境
 * 线上环境
 */
// 当前的环境
const env = import.meta.env.MODE || 'prod'

const EnvConfig = {
  //开发环境
  development: {
    baseApi: '**/api',
  },
  // 测试环境
  test: {
    baseApi: '**/api',
  },
  //正式环境
  pro: {
    baseApi: '**/api',
  },
}

export default {
  env,
  ...EnvConfig[env]
}

请求封装，创建文件夹api/request.js

import axios from 'axios';
import config from '../config'
import { ElMessage } from 'element-plus'
const NETWORK_ERROR = '网络请求异常,请稍后重试.....'

const request = axios.create({
    baseURL: config.baseApi
});

// 请求拦截器
request.interceptors.request.use(config => {
    // 在发送请求之前做些什么
    return config;
}, error => {
    // 对请求错误做些什么
    return Promise.reject(error);
});

// 响应拦截器
request.interceptors.response.use((res) => {
    const { Data, MsgCode, succeed } = res.data
    console.log(res.data);
    // 根据后端 协商  视情况而定
    if (succeed) {
        return Data
    } else {
        // 网络请求错误
        ElMessage.error(MsgCode || NETWORK_ERROR)
        return Promise.reject(MsgCode || NETWORK_ERROR)
    }
})
export default request;

使用 post请求

//导入 formInLine是一个{} 对象
import request from '@/api/request';
request.post('/User/Login', formInLine
            ).then(response => {
            //这个地方可以配合vuex等多种缓存 然后实现路由跳转等一系列操作
                console.log(response)
            }).catch(error => {
                console.log(error);
            });