Vue(三) axios配置与使用

原创

已于 2022-08-08 12:47:57 修改 · 889 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

于 2022-08-08 12:24:52 首次发布

本文介绍了在Vue项目中如何安装和使用axios，包括前端代理配置、API管理以及axios的封装和请求拦截。通过在main.js中导入axios，设置vue.config.js的代理，创建API管理文件进行接口分类，以及学习封装axios以处理如token和响应状态等细节。

一、npm 安装 axios

npm install --save axios vue-axios

二、main.js文件导入axios依赖包

axios依赖包的使用手册

#导入第三方依赖包
import axios from 'axios';
import VueAxios from 'vue-axios';

#vue2写法
Vue.use(VueAxios, axios)
// 配置请求基础路径(api的url)
axios.defaults.baseURL = 'http://api.com/'

#vue3写法
const app = Vue.createApp(App)
app.use(VueAxios, axios)
app.provide('axios', app.config.globalProperties.axios)  // provide 'axios'

三、设置前端代理

vue.config.js文件

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  //代理
  devServer: {
    proxy: {
      "/api": {
        target: "http://api.com",
        changeOrigin: true,
        publicPath:"http