封装axios

仰望星空的小乌龟

已于 2023-05-10 14:36:31 修改

阅读量45

点赞数

分类专栏： Vue 文章标签： javascript 前端 vue.js

于 2023-05-08 15:37:26 首次发布

本文链接：https://blog.csdn.net/weixin_46266624/article/details/130560391

版权

Vue 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

文章介绍了在Vue项目中如何使用命令下载axios库，并进行版本指定。接着，它展示了如何封装axios，创建一个http服务实例，设置基础URL和超时时间，并添加请求拦截器来处理token。此外，还提到了在其他组件中如何导入并使用这个封装好的axios服务。

摘要由CSDN通过智能技术生成

1 前端页面准备工作

使用命令下载axios

npm install axios@0.19.2

封装axios

utils/request1.js


import axios from 'axios'
// 创建axios实例
const service = axios.create({
  baseURL: 'http://localhost:9001',
  timeout: 20000
})
//http request拦截器(每个请求都会判断)[加了token的如不带token可以把这个拦截器去掉]
service.interceptors.request.use(
  config=>{
    if (cookie.get('guli_token')){
      //将cookie值放入到header中
      config.headers['token']=cookie.get('guli_token')
    }
    return config;
  },
  err=>{
    return Promise.reject(err);
  }
);
export default service

然后后面用的时候直接引入这个js文件比如：
创建一个api包下面写个A.JS文件，然后引入这个B.js，最后vue界面调用A.JS里面的方法即可

import request from '/utils/request1'
export default {
  // 查询前两天banner数据
  getListBanner() {
    return request({
      url: `/educms/bannerfront/getAllBanner`,
      methods: 'get'
    })
  }
}