vue2.0_在vue中axios请求的封装和使用

QiuRenBB

已于 2022-03-15 09:47:38 修改

阅读量2.2k

点赞数 1

分类专栏： Vue2.0 文章标签：前端

于 2022-02-11 13:23:59 首次发布

本文链接：https://blog.csdn.net/qiurenbb/article/details/122877298

版权

本文介绍了在Vue2.0项目中如何进行axios请求的封装，包括在src/utils/request.js中封装axios，创建src/api/user.js存放请求接口，以及在main.js中全局注册并使用封装后的axios。通过这种方式，可以更方便地在项目中调用如登录接口等API。

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

首先

npm install axios

其次

在src目录下新建一个utils文件夹，我们的一些封装工具都可以放在这。
然后在utils文件夹下新建一个request.js文件，将aixos请求的封装写到里面：

import axios from 'axios'
import Qs from 'qs'
import store from '@/store'
import router from '@/router'
import filterPath from '@/utils/filterPath'
import {
   Toast} from 'vant'
import {
   getToken} from '@/utils/auth'
import {
   removeToken} from "./auth";
import {
   isEmptyObject} from '@/utils'


// 创建axios实例
const service = axios.create({
   
  baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
  // withCredentials: true, // 跨域请求时发送cookie
  timeout: 25000, // 请求超时的时长
  headers: {
   'Content-Type': 'application/x-www-form-urlencoded'}, // 默认设置请求头 为FormData 数据格式  （JSON数据格式：application/json）
  method: 'post', // 默认设置'post'请求
  withCredentials: true //跨域请求时是否需要使用凭证  简单讲：跨域请求是否提供凭据信息(cookie、HTTP认证及客户端SSL证明等)，也可以简单的理解为，当前请求为跨域类型时是否在请求中协带cookie。
});

// 请求拦截器（对请求数据配置做统一处理）
service.interceptors.request.use(
    //在发送请求之前做些什么
    config => {
   
      // console.log('baseURL:', config.baseURL, config.type)
      const BASE_PATH = filterPath(config.type);
      config.data = {
   ...config.data};
      if(config.method === 'get'){
   
        config.params = new URLSearchParams(config.data